尝试此操作-已测试：

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

在以后的版本中，您可以使用vh：

#right, #left {
  height: 100vh
}

您可以在CSS中使用查看端口单元：

HTML格式：

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, and 1vh is 1% of screen height */
}

这对我有用：

html, body {
    height: 100%; /* IMPORTANT!!! Stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

摘自本页。

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

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

最简单的方法就是这样做。

第二部分{背景：红色；高度：100vh；}正文{边距：0px；}<div></div>

现在使用高度：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>