首页 文章

Flex CSS阻止底层内容

提问于
浏览 次
4

想知道是否有人可以帮助我 . 我使用以下代码显示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>
html css css3 flexbox display

2 回答

  • 0

    您的 Headers 元素（ .headerbar ）将子项（ #titlebar ）设置为 height: 90px . 这设置了 Headers 的高度 .

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

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

    此外，在父级上设置 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>
    回复于
  • 0

    您不应该将所有元素 position:fixed 设置为逻辑上不存在，因为不存在滚动行为 . 只保留 Headers .

    body {
 margin:0;
}
.headerbar {
  background: #333333;
  position: fixed;
  width: 100%;
  top:0;
}

#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%;
  margin-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;
}

    <div class="headerbar">
  <div id="titlebar"></div>
</div>

<div id="mainpage">
  <div class="leftsidemain"></div>
  <div class="pagearea"></div>
</div>
    回复于

相关问题