最近、ページを縦幅いっぱいに表示させているデザインをよく見かけます。TenteroringProjectもそんなデザインにしようと四苦八苦していたわけですが、ようやくできました。ぶっちゃけ大したことないです…。
まず、構成としてこのようになっています。
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="menu">
</div>
<div id="contents" class="clearfix">
<div id="sidebar">
<div class="box">
</div>
<div class="box">
</div>
</div>
<div id="main">
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
大枠として“wrapper”があり、その中に“header”, “contents”, “footer”が。さらに“contents”内には“sidebar”, “main”という構成。記述は“box”に書いてます。
この構成で縦幅いっぱいに表示させるには、CSSに下記を追加する。
html, body
{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
position: relative;
}
body > #wrapper{height: auto;}
#contents{padding: 0px 0px 60px 0px;}
#footer
{
height: 60px;
position: absolute;
bottom: 0;
}
“html”, “body”, “wrapper”と“height:100%”にする。positionタグにて位置決めを行い、“contents”には“footer”用にpaddingでスペースを作ります。（四苦八苦していた理由はコレでした…）
これにて、縦幅いっぱいに表示できるかと思います。
コメントを残す