Flex CSS 阻止底部内容答案

【问题标题】：Flex CSS Blocking bottom contentFlex CSS 阻止底部内容
【发布时间】：2019-05-10 19:23:00
【问题描述】：

想知道是否有人可以帮助我。我使用以下代码在 div 中显示内容，但是每当我将数据加载到 DIV 中时，它都会正常加载并出现滚动条。但是，最后的结果总是显示一半。
如果我添加如下所示的垫片，它可以解决问题，并且我可以滚动到最后一个结果之外。

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

但是，这并不漂亮，所以我的问题是 display: 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>

【问题讨论】：

请添加您的所有代码。
@Dogukan Cavus 完成感谢我添加了布局的基础知识，并尝试通过代码示例保持简单。
@CliveAtkins，不幸的是，这段代码没有证明你描述的问题。请检查为什么#mainpage 元素具有固定的高度值。您是否还有底部内容块的样式（有问题）？

标签： html css flexbox display

【解决方案1】：

您的标题元素 (.headerbar) 有一个子元素 (#titlebar) 设置为 height: 90px。这设置了标题的高度。

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

试试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>

【讨论】：