読者です 読者をやめる 読者になる 読者になる

opamp_sando's blog

クソザコが割りと適当なことを書くためにある備忘録です。あとたまに普通の日記も書きます

divを最大化する

htmlのdivを最大化する方法。

<html>
    <head><title>test</title></head>
    <body>
        <div class="contents">
            <p>hoge piyo bot</p>
        </div>
    <body>
</html>

というhtmlにおいてdivを最大化したい場合を例えば考えてみると...

html {
    height: 100%;
}

html body {
    height: 100%;
}

html body .contents {
    height: 100%;
}

という感じかな?
ぐぐったら親の要素であるbodyも100%にして更にdivを100%という資料が結構みつかるのだが、これではうまくできなかった。
原因は更にhtmlのheightも100%にしなければならなかったということ。

ちなみになんで上のCSSがこんな書き方になってるかというとlessで書いてたものを変換したから...

参考:
http://d.hatena.ne.jp/seto-san/20081215/1229335070

Firefox ブラウザ無料ダウンロード