ここで説明するように、cosntructionを実装しようとしています。
<div id="wrap">
<div id="header">
header
</div>
<div id="main">
main<br/>main<br/>main<br/>main<br/>main<br/>main<br/>
</div>
</div>
<div id="footer">
footer
</div>
#header {
border-top:20px solid #fff;
height: 33px;
line-height: 33px;
text-align: center;
}
html { height: 100%; }
body { height: 100%; width: 90%; margin: auto; }
#wrap { min-height: 100%;background-color:gray;}
#main {
overflow: auto;
padding-bottom: 53px; /* must be same height as the footer */
background-color: red;
border: solid 1px blue;
height: 90%;
}
#footer {
position: relative;
margin-top: -53px; /* negative value of footer height */
height: 33px;
line-height: 33px;
border-bottom:20px solid #fff;
text-align: center;
}
</ p>
ページ全体の背景色(灰色)、ヘッダーとフッターは透明(ページの背景が透けて見える)、コンテンツブロックの背景は赤です。コンテンツ部分は伸縮可能であるにもかかわらず、ブロック全体を背景で塗りつぶすのではなく、実際の部分だけを塗りつぶします。
- コンテンツブロック全体を色で塗りつぶすことはできますか?
- ウィンドウを最小化しながら、フッターはコンテンツに浮かびます。そのような動作を無効にすることは可能ですか?