0

私のプロジェクトには次の要件があります。

  1. ページの上部に固定されたヘッダー
  2. コンテンツ領域の背景は白で、高さは100％です
  3. コンテンツが画面の高さよりも小さい場合、スクロールバーはありません
  4. IE7 +をサポートする必要があります（IEのJS修正は問題ありません）
  5. コンテンツが画面の高さよりも高い場合、スクロールは白いコンテンツ領域内にとどまる必要があります（ヘッダーの下には行かないでください）。

これが私の基本的なHTMLです。

<div class="wrap">
    <div id="header">header</div>
</div>
<div class="wrap" id="content">content</div>​

CSS：

body{background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;}
html,body{height:100%;}
.wrap{width:300px; margin:0 auto;}
#header{position:fixed; background:#aaa; top:10px; width:300px;}
#content{height:100%; background:white; margin-top:40px}

例： http： //jsfiddle.net/zw3WS/

最初の質問は、コンテンツの高さを100％にし、ヘッダーの下に入らず、不要なスクロールバーを持たないようにする方法です。

次に、コンテンツが画面よりも高い場合、空白でのみスクロールし、現在のようにコンテンツがtoバーの下でスクロールできないようにするにはどうすればよいですか？

4

1 に答える 1

1

「空白のみ」でスクロールする場合はposition: fixed、ラッパー要素を設定してから、ヘッダー要素とコンテンツ要素を内部に完全に配置することでスクロールできます。

body{
  background:#C0DEED url('https://si0.twimg.com/images/themes/theme1/bg.png') repeat-x 0px -80px fixed;
  overflow: hidden; /* no scrollbars for page body */
}

.wrap {  
  width: 300px;
  position: fixed;
  top: 10px;
  left: 50%; /* for horizontal centering */
  margin-left: -150px; /* for vertical centering */
  bottom: 0;
}

#header{
  position: absolute; 
  background:#aaa; 
  top: 0;
  left: 0;
  right: 0;
}

#content{
  background:white; 
  position: absolute;
  bottom: 0;
  top: 30px;
  left: 0;
  right: 0;
  overflow: auto; /* this makes the scrollbar appear inside #content */
}

デモ： http： //jsbin.com/osipin/1/edit

ページ本文をスクロールするには、マークアップに2つの要素を追加する必要があります。ヘッダーの背景とコンテンツの背景です。

ヘッダーの背景の目的は、下にスクロールしたときにコンテンツを隠すことです。そうしないと、ヘッダーの下に表示されます。コンテンツをカバーするために使用するのは、ページと同じ背景です。このbg要素は、ビューポートの幅を埋め、コンテンツ領域の上部マージンの高さになるように正しくサイズ設定する必要があります。実際のヘッダーは、設定された幅とを使用して、このbg要素内で水平方向の中央に配置できますmargin: 0 auto。

コンテンツの背景要素は、コンテンツの前にあり、位置が固定されている空の要素である必要があります。その目的は、コンテンツがビューポートの高さよりも短い場合でも、白い領域がページの下部まで広がるようにすることです。

新しいCSSは次のようになります。

body, .header-bg {
  background:#C0DEED url(https://si0.twimg.com/images/themes/theme1/bg.png) repeat-x 0 -80px fixed;
}

.wrap {
  width:300px;
  margin: 0 auto;
}

.header-bg {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  height: 40px;
}

#header {
  background:#aaa;
  width:300px;
  margin: 10px auto 0;
}

.content-bg {
 background: #FFF;
  position: fixed;
  width: 300px;
  top: 40px;
  bottom: 0;
  z-index: -1;
}

そして、このような新しいマークアップ：

<div class="wrap">

  <div class="header-bg">
    <div id="header">header</div>
  </div>

  <div class="content-bg"></div>

    <div id="content">
      CONTENT
    </div>

</div>

デモ： http： //jsbin.com/osipin/4/edit

于 2012-10-26T19:42:10.583 に答える