填补剩余的窗户高度

Question

填补剩余的窗户高度

我知道这个问题之前已被问过多次,但我似乎没有把我的榜样弄好.如何让紫色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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nan*_*rma 5

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

html  {
    height: 100%;
}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，6 月前
查看次数：	92 次
最近记录：	7 年，6 月前