スタイルシートで高さを合わせるコツ

CSS

うまく高さを合わせるには border: none; で高さを消すのがコツ

css

*{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#header{
    height: 100px;
    background-color: rebeccapurple;
    border: none;
}

#out_box{
    height:100%;
    width: 100%;
    border: none;
}

#in_box{
    height: calc(100% - 200px);
    background-color: skyblue;
    border: none;
}

#footer{
    height: 100px;
    background-color: rebeccapurple;
    border: none;
}

index.html

<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <title>トップページ</title>
</head>

<body>
    <div id="out_box">
        <div id="header"></div>

        <div id="in_box"></div>

        <div id="footer"></div>
    </div>
</body>

</html>


見た目こんな感じ
f:id:da-machi:20171203042354p:plain


高さを合計100％になるよう計算するスクロールバーも出ずに きれいに収まった。