画面の高さいっぱいにDIV要素を張り巡らせる
需要があるのかわかりませんが、たまに学生さんからの質問があるのでここに掲載しておきます。
セレクタやクラス、IDは各自で調整してくださいね。
html,body {
height: 100%;
}
body {
font-size: 100%;
line-height: 160%;
color: #000;
text-align: center;
background: #cccccc;
}
#container {
margin: 0 auto;
width: 1000px;
height: 100%;
min-height: 100%;
text-align: left;
background: #fff;
}
body > #container {
height: auto;
}
jqueryを使う方法もありますが、シンプルにCSSだけで実現できることはCSSだけでしたほうが良いと思います。
何事もシンプルが一番です。
