如果将html和body_height设置为100%，它将覆盖整个页面。

如果您将任何特定的div最小高度设置为100%，那么它将覆盖整个窗口，如下所示：

CSS

html, body {
  height: 100%;
}

div#some-div {
  min-height: 100%;
}

回想起

只有当div的直接父级是body时，这才有效，因为百分比总是从直接父级继承的，通过执行上面的CSS代码，您告诉div从直接父（body）继承100%的高度，并使其成为您的最小高度：100%。

另一种方式

只需将div高度设置为100vh。这意味着视口高度为100。

CSS

div#some-div {
  height: 100vh
}

如果要设置＜div＞或任何元素的高度，也应该将＜body＞和＜html＞的高度设置为100%。然后可以将元素的高度设置为100%：）

下面是一个示例：

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

您可以使用以下CSS使div达到浏览器窗口高度的100%：

display: block;
position: relative;
bottom: 0;
height: 100%;

现在使用高度：100vh；对于固定的窗口高度：

<style>
    .header-top {
        height: 100vh;
        background: #000;
        color: #FFF;
        display: flex;
        align-items: center;
        padding: 10px;
        justify-content: space-around;
    }

    .header-top ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
    }

    .header-top ul li {
        padding:0px 10px;
    }
</style>

<div class="header-top">
    <div class="logo">Hello</div>
    <ul>
        <li>Menu</li>
        <li>About Us</li>
        <li>Contact US</li>
        <li>Login</li>
    </ul>
</div>

如果你能绝对定位你的元素，

position: absolute;
top: 0;
bottom: 0;

会做到这一点。

您可以使用显示器：flex和高度：100vh

html，正文{高度：100%；边距：0px；}正文{显示：柔性；}.左，.右{挠曲：1；}.左侧{背景：橙色；}.对{背景：青色；}<div class=“left”>左</div><div class=“right”>右</div>