如何让DIV占据浏览器的全高

Question

我想制作一个高度为 100% 的 DIV，以占据 浏览器窗口的全部高度，而不仅仅是视口高度。

外部 DIV 具有 Display 属性 Flex。

目标 DIV 的类名为 full-height-div

那是HTML代码

<div class="main-container">
    <div class="full-height-div">
        
    </div>
    <div class="main-content">
        
    </div>
</div>

那是 CSS 代码

body, html {
    margin: 0;
    height: 100%;
}

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

.full-height-div {
    height: 100%;
}

Answer 1

听起来您希望<div class="full-height-div"> 成为其父级的高度。

.main-container 需要flex-direction: row，而不是height: 100%。

在此示例中，<div class="full-height-div">（红色轮廓）采用其父 div.main-container（绿色轮廓）的高度。

body, html {
    margin: 0;
    height: 100%;
}

.main-container {
    display: flex;
    flex-direction: row;    
    border: 5px solid green;
    width: 100%;
}

.full-height-div {
    height: 2000px; /* just to force it to be taller than the viewport in this example */
    border: 1px solid red;
    width: 100%;
}

<div class="main-container">
    <div class="full-height-div">
    </div>
    <div class="main-content">
    </div>
</div>

此处已回答：How can I make Flexbox children 100% height of their parent?

Answer 2

body, html {
    margin: 0;
    height: 100%;
}

.full-height-div {
    height: 100vh;
    background-color:blue;
}

.main-container {
    display: flex;
    background-color:red;
}

<div class="main-container">
    <div class="full-height-div">
        full
    </div>
    <div class="main-content">
        main
    </div>
</div>

.full-height-div {
    height: 100vh;
}