代码之家 › 专栏 › 技术社区 › Clive Atkins

FlexCSS阻止底部内容

display flexbox css3 css html

Clive Atkins · 技术社区 · 7 年前

不知是否有人能帮助我。我使用下面的代码在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>

2 回复 | 直到 7 年前

Michael Benjamin William Falcon 7 年前

标题元素( .headerbar )他有一个孩子( #titlebar height: 90px . 设置收割台高度的。

您的主要内容元素( #mainpage )设置为 height: 600px . 当视窗小于690px时,这将溢出屏幕。

而不是尝试 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>

推荐文章

JWWalker · CSS的resize属性可以用来调整flex列宽吗?

1 年前

Sidaqpreet Singh · 为什么当设置为包裹时,柔性包裹会导致横轴出现间隙?

1 年前

rifx · 在kendoTreeViewNodeTemplate(Angular)中设置数据项的样式

1 年前

Fox L · 每行4个项目,但如果少于4个项目则留空?

1 年前

Zack Riquelme · 如何使用CSS将HTML的<header>中的<a>和<nav>内容在同一个父框中左右拆分?

2 年前

JobHunter69 · 为什么这个组件不填充整个宽度?

2 年前

Vasantha Kalyani · Flexbox Html CSS设置位置问题[重复]

2 年前

coder · 边界半径不适用于容器元素

2 年前

user9026 · 项目登录页面(freecodecamp)定价设计

2 年前

Bo Thompson · 根据需要调整柔性物品的高度,但不得超过容器

2 年前