3

私の Web ページには、CSS で固定された上部セクションと下部セクションがあります。position: fixed;

上と下の間に絶対位置のページ要素 (div) があり、ここにほとんどのコンテンツが表示されます。ページ要素に対してコンテンツが大きすぎる場合は、y 軸でオーバーフローさせたい。この場合、スクロール バーを画面の一番右(ページ要素ではなく) に表示したいので overflow-y: scroll;、body 要素に配置します。(例については、フェイスブックを参照してください)。

これで、ページ要素の境界線と背景を除いて問題なく動作します。最初に表示されているコンテンツには境界線と背景の両方がありますが、オーバーフロー領域までスクロールすると、どちらも表示されません。

絶対 ( bottom: 105px) および相対 ( height: 100%;) メソッドを使用してページの高さを設定しようとしましたが、どちらも機能しません。また、ページ要素内のコンテンツを<p style="clear: both"></p>.

何か案は？ありがとう！

4

2 に答える 2

0

問題はおそらくheight: 100%;実際にあります。背景色を塗りつぶすと、100% 塗りつぶされます (可視領域)。問題は、オーバーフローが100% を超えるため、背景色が定着しないことです。

を使用する代わりに、絶対位置の要素にしたいものは何でもheight:100%入れます。min-heightオーバーフローは常にその最小高さを超え続けるため、 がそれbackground-colorを埋めると、全体が満たされます。

編集：回答のための大きな単語ブロックが煩わしいことに気づきました。より簡潔に：

持っていた：

.middle {height:100%;}

それを取り除き、次のように変更します。

.middle {min-height:100%;}
于 2013-01-10T21:03:20.157 に答える
0

あなたが国境で何を望んでいるのかよくわかりません。このフィドルには、次のコードのみでコンテンツの上部と下部に境界線があります。

HTML

<div class="top">Top</div>
<div class="middle">
  <div class="content"></div>
</div>
<div class="bottom">Bottom</div>

CSS

.top,
.bottom {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  z-index: 1;
}

.bottom {
  bottom: 0;
  top: auto;
  background-color: blue;
}

.middle {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 100px;
}

.content {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  border: 10px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 100px;
}

このフィドルには、次のコード (上記と同じ html) を使用して常に境界線があります。

CSS

.top,
.bottom {
  position: fixed;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  background-color: red;
  border-bottom: 10px solid black;
  z-index: 1;
}

.bottom {
  bottom: 0;
  top: auto;
  background-color: blue;
  border-top: 10px solid black;
  border-bottom: 0;
}

.middle {
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 110px;
}

.content {
  width: 100%;
  height: 1000px;
  background-color: yellow;
  border-right: 10px solid black;
  border-left: 10px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 110px;
}
于 2013-01-11T01:01:11.590 に答える