QA@IT

box-sizingは使ってもいい?

2739 PV

はじめまして、お世話になります。現在ウェブデザインを趣味で勉強中の者です。

今回http://purecss.io/のようなレイアウトのウェブサイトを作りたいと思い、下記のような手法でfooterを最下部に持って行こうとしましたが、つまずいてしまいました。これだけだとfooterのボックス幅が実質的に 100%+パディング分 となってしまいレイアウトが崩れてしまいます。

  1. html, body{height: 100%;}
  2. nav {position:fixed;top:0;bottom:0;width:150px;}
  3. main {padding-left: navと同じ幅のパディング;}
  4. footer {position:absolute;padding-left: navと同じ幅のパディング;bottom:0;width:100%;}

結果として、footerにbox-sizing: border-box;を設定することで解決できましたが、box-sizingってIE8以下を考えると使っていいものなのでしょうか?(HTMLは練習なので見やすいHTML5で書いてます)

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrap">
        <nav>
            <ul>
                <li><a href="">Menu 1</a></li>
                <li><a href="">Menu 2</a></li>
                <li><a href="">Menu 3</a></li>
                <li><a href="">Menu 4</a></li>
                <li><a href="">Menu 5</a></li>
            </ul>
        </nav>
        <main>
            contents
        </main>
            <footer>This is footer</footer>
    </div>
</body>
</html>
html, body {
    height: 100%;
    margin: 0;
}
.wrap {
    background: rgba(250,240,230,0.4);
    position: relative;
    min-height: 100%;
}

nav {
    position: fixed;
    width: 150px;
    top: 0;bottom: 0;
    border-top: 0;border-bottom: 0;
    background: rgba(255,255,128,0.4);
}

main {
    background: rgba(255,192,203,0.4);
    padding: 0 0 60px 150px;
    height: 100%;
    overflow: hidden;
}

footer {
    box-sizing: border-box;
    display: block;
    background: rgba(0,0,0,0.2);
    color: white;
    position: absolute;
    bottom: 0;
    height: 60px;
    padding-left: 150px;
    width: 100%;
}

回答

IE8以下を考えると使っていいものなのでしょうか?

これについては答えようがないです。プロジェクトのターゲットがどこなのか次第でしょう。

paddingではなく、そのサイト(purecss)の様に内部にインラインブロックを用意して、
内側で調整すればbox-sizingなしでいけるかもしれませんね。
Chromeでしか確認してませんが特別変わったこともしていません。

    <footer>
        <div class="footer-l footer-content"></div>
        <div class="footer-c footer-content">This is footer</div>
    </footer>  
footer {
    /*box-sizing: border-box;*/
    display: block;
    background: rgba(0,0,0,0.2);
    color: white;
    position: absolute;
    bottom: 0;
    height: 60px;
    width: 100%;
}
.footer-l{
    width:150px;
}

.footer-content{
    display:inline-block;
}
編集 履歴 (0)
  • ありがとうございます!
    とても勉強になりました。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。