「空白のみ」でスクロールする場合は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