Flex CSS阻止底部内容

Question

想知道是否有人能帮我。我使用以下代码来显示div中的内容，但每当我将数据加载到div时，它都会加载良好，并显示滚动条。但是，最后的结果总是显示一半
如果我像下面这样添加一个空格，它就解决了问题，我可以滚动到最后一个结果之外。

<div style="height:300px;"></div

然而，这并不好看，所以我的问题是显示：flex允许你以某种方式添加200px的底部缓冲区吗？我读得很好https://css-tricks.com/snippets/css/a-guide-to-flexbox/但找不到解决方案。

全代码

.headerbar {
background: #333333;
position: fixed;
width: 100%;
}
#titlebar {
width: 90%;
height: 90px;
background-image: url(images/logo_new.png);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
background-position: 5px 5px;
}
#mainpage {
display: flex;
justify-content: flex-start;
min-width: 100%;
height: 600px;
width: 100%;
position: fixed;
top: 92px;
}
.leftsidemain {
background-color: #27383f;
width: 50%;
height: 850px;
flex: 1 0 0;
}
.pagearea {
background-color: blue;
width: 50%;
min-width: 50%;
min-height: 850px;
color: #000;
text-align: left;
flex: 1 0 0;
overflow: scroll;
}

<div class="headerbar">
<div id="titlebar"></div>
</div>
<div id="mainpage">
<div class="leftsidemain"></div>
<div class="pagearea"></div>
</div>

Answer 1

您的头元素(.headerbar(有一个子元素(#titlebar(设置为height: 90px。设置页眉的高度。

您的主要内容元素(#mainpage(设置为height: 600px。嗯，当视口小于690px时，它会溢出屏幕。

尝试height: calc(100vh - 90px)而不是height: 600px。

此外，在父级上设置overflow，这样子级溢出时滚动条就会激活。

.headerbar {
background: #333333;
position: fixed;
width: 100%;
}
#titlebar {
width: 90%;
height: 90px;
background-image: url(images/logo_new.png);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
background-position: 5px 5px;
}
#mainpage {
display: flex;
justify-content: flex-start;
min-width: 100%;
/* height: 600px; */
width: 100%;
position: fixed;
top: 92px;
height: calc(100vh - 90px); /* new */
overflow: auto;             /* new */
}
.leftsidemain {
background-color: #27383f;
width: 50%;
height: 850px;
flex: 1 0 0;
}
.pagearea {
background-color: blue;
width: 50%;
min-width: 50%;
min-height: 850px;
color: #000;
text-align: left;
flex: 1 0 0;
/* overflow: scroll; */
}
body { margin: 0; }

<div class="headerbar">
<div id="titlebar"></div>
</div>
<div id="mainpage">
<div class="leftsidemain"></div>
<div class="pagearea"></div>
</div>