Question

我想制作带有标题，粘性页脚和2个流体容器的引导程序布局。其中一个是固定高度，另一个必须占用所有剩余高度。

目前我试图通过将第二个容器的高度设置为100％来实现此目的，但不幸的是它将滚动添加到窗口。如何使container2填充可用高度，因此它不会将滚动添加到窗口。

<div id="app" class="height100">
  <div class="height100">
<div class="navbar navbar-default">
  NAVBAR
</div>
<div class="container-fluid container1">
  CONTAINER 1
</div>
<div class="container-fluid container2">
  CONTAINER 2
</div>
<div class="footer">
  FOOTER
</div>

html,
body,
.height100 {
  height: 100%;
}

.navbar {
  margin-bottom: 0px;
  background-color: red;
}

.container1 {
  background-color: yellow;
  height: 105px;
}

.container2 {
  background-color: green;
  height: 100%;
}

.footer {
  bottom: 0;
  background-color: white;
  border-top: #ddd 1px solid;
  padding-top: 5px;
  position: fixed;
  left: 0;
  right: 0;
  -webkit-transform: translateZ(0);
}

FIDDLE

谢谢。

Answer 1

将溢出设置为隐藏。
CSS

.height100
  {
  height: 100%;
 overflow:hidden;
 }

https://jsfiddle.net/no83psx3/4/

Bootstrap 3，全高容器，无滚动

1 个答案: