開発メモ

開発用のメモです。

CSS ページのサイズを最低1画面にする。

min-height: calc(100vh); => 1画面を最小とする

height : 100%; => スクロールありで表示領域を最大とする。

margin : 0 auto; => 画面のセンターに配置する。

<!DOCTYPE html>
<html>
    <head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            top: 0px;
            position: absolute;
            background-color: #000;
            color: #FFF;
            height: 60px;
            width: 100%;
        }
        .footer {
            bottom: 0px;
            position: static;
            background-color: #000;
            color: #FFF;
            height: 60px;
            width: 100%;
        }
        .wall {
            width: 100%;
            min-height: calc(100vh);
            height: calc(100%);
        }
        .container {
            padding-top: 65px;
            padding-bottom: 5px;
            min-height: calc(100vh - 130px);
            height: calc(100%);
            max-width: 1000px;
            min-width: 600px;
            margin: 0 auto;
        }
    </style>
    </head>
    <body>
        <div class="wall">
            <div class="header">
                <h1>Title</h1>
            </div>
            <div class="container">
                <h3>CONTENTSh3>;
            </div>
            <div class="footer">
                <h3>Footer<h3>;
            </div>
        </div>
    </body>
</html>
Twitter: @asahina_alice