当需要滚动时，柔性增长也占据了自己的空间。
我有一个容器，在我的例子中，body和html标记是容器。然后我有3个div在其中，我想最后一个填补剩余的垂直空间，而仍然有一个空白。
第三个div是动态生成的，所以我无法预测它需要多高。问题是，如果它增长过快，并且需要一个滚动条，它过去的底部边距也会消失。如果不需要滚动条，也不出现滚动条，那么边距仍然存在，一切看起来都是我想要的。
我试着在上面的图片中尽可能地画出我的意思。第一种情况是我一直想要发生的事情，不管有没有滚动条。第二张图片是实际发生的情况，蓝色div失去了它的底部边缘，尽管它已经设置。
下面是html和body标记的CSS (它们包含3个div，包括蓝色的)：
html,
body
{
width: 100%;
height:100%;
margin: 0px;
padding: 0px;
display: flex;
flex-direction:column;
align-items: center;
background: #494d5f ;
}这是我的第3div的代码，蓝色的：
.bottomDiv
{
display:flex;
flex-direction:column;
background: #a0d2eb ;
align-items: center;
width: 97%;
margin-bottom:1.5%;
flex: 1 1 auto;
padding-top:1%;
padding-bottom:1%;
}也许我没有很好的澄清，但是在我的例子中，蓝色的那个长得像它应该的那样，完全遵守它的边距，直到一个滚动条出现并且是需要的。无论它必须做多少增长，它在尊重其利润率的同时完美地做到这一点。但是，如果它必须“超出”页面的范围--也就是说，需要一个滚动条来显示所有的网页--那么它的边距就会消失。如果没有滚动条，一切看起来都很完美。
回答 2
Stack Overflow用户
发布于 2021-03-24 13:51:27
只需将这一行：body { height: 100%; }改为：body { min-height: 100vh; }。
有了那条线，身体的高度将至少有一个屏幕高度(100 eb )，但允许我适当的溢出，因为它被允许eb计算，然后屏幕。这样，边距就不会被移除。
html,
body {
width: 100%;
min-height: 100vh;
margin: 0px;
padding: 0px;
display: flex;
flex-direction: column;
align-items: center;
background: #494d5f;
}
.topDiv,
.midDiv {
width: 97%;
height: 50px;
}
.topDiv {
margin-top: 1.5%;
background-color: red;
}
.midDiv {
background-color: blue;
}
.bottomDiv {
display: flex;
flex-direction: column;
background: #a0d2eb;
align-items: center;
width: 97%;
margin-bottom: 1.5%;
flex: 1 1 auto;
padding-top: 1%;
padding-bottom: 1%;
}
#height:checked + label::after {
content: "";
display: block;
height: 150vh;
}<div class="topDiv"></div>
<div class="midDiv"></div>
<div class="bottomDiv">
<input type="checkbox" id="height" name="height">
<label for="height">checkmark me to extend box height</label>
</div>
Stack Overflow用户
发布于 2021-03-24 12:11:35
我已经举了一个例子，所以您可以尝试这种方法：
body,
html {
margin: 0;
padding: 0;
}
#page {
display: flex;
flex-direction: column;
height: 100vh;
outline: 1px solid purple;
}
#header {
height: 30px;
outline: 1px solid red;
}
#middle {
flex-grow: 1;
/* height: 100vh; */
/* flex-direction: column; */
outline: 1px solid green;
}
#footer {
outline: 1px solid blue;
}<div id="page">
<div id="header">...</div>
<div id="middle">...</div>
<div id="footer">...</div>
</div>
尝试删除#footer，并看到#中间填充整个屏幕直到结束。此外，如果需要任何边距，则必须修改容器，如下所示：#page { ..., margin: 10px; height: calc(100vh - 20px); }
https://stackoverflow.com/questions/66780576
复制相似问题
腾讯云开发者
