填补剩余的窗户高度

时间:2018-06-04 10:38:32

标签: html css flexbox

我知道这个问题之前已被多次询问,但我似乎没有得到我的榜样。如何让紫色div填充窗口的剩余高度?

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 100%;
            margin: 0;
        }

        .container {
            display: flex;
            flex-flow: column;
            height: 100%;
        }

        .topbox {
            background-color: red;
            flex: 0 1 40px;
        }

        .bottombox {
            background-color: purple;
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="topbox"></div>
        <div class="bottombox"></div>
    </div>
</body>
</html>

1 个答案:

答案 0 :(得分:5)

在html标记上添加100%的高度。

html  {
    height: 100%;
}

<!DOCTYPE html>
<html>
<head>
    <style>
html {
height: 100%;
}
        body {
            height: 100%;
            margin: 0;
        }

        .container {
            display: flex;
            flex-flow: column;
            height: 100%;
        }

        .topbox {
            background-color: red;
            flex: 0 1 40px;
        }

        .bottombox {
            background-color: purple;
            flex: 1 1 auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="topbox"></div>
        <div class="bottombox"></div>
    </div>
</body>
</html>