cssでheight 100%を作る - moosan63の日記、技術メモ

CSS書いててたまに、height:100%;がうまくいってなくて、コンテンツ量の少ないページでデザインが崩れてたり、逆にスクロールしたときに背景が途切れたりするときがあるのでそのためのメモ。

<html>
  <body>
     <div id="wrapper">
         .....

     </div><!--/ #wrapper -->
  </body>
</html>

みたいな感じでHTMLを書いて。

html,body{
  height:100%;
}

div#wrapper{
  min-height:100%;
}

CSSをこんなかんじに定義する。
#wrapperのheightをmin-heightで指定するのがポイント。
min-heightはIE6では使えないのでそれに関してはまた別のハックが必要。