LoginSignup
10
10

More than 5 years have passed since last update.

CSSを用いて画面のサイズを最低1画面にし、ヘッダーフッターを最上部・最下部に配置する

Last updated at Posted at 2014-10-14

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>CONTENTS<h3>;
            </div>
            <div class="footer">
                <h3>Footer</h3>;
            </div>
        </div>
    </body>
</html>
10
10
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
10
10