Bootstrap 3使用容器液体保持100％高度

Question

我正在尝试为这样的页面创建一个布局，其中全高度左侧关闭栏。我继续跑到左边的关闭栏，要么把所有东西都向下推，要么仅限于左上角：

Answer 1

我想你想要那样的东西。

body {margin:0;}
.side {
  position: fixed;
  background: blue;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100px;
}
.content {
  padding-left: 100px;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}
.top {
  height: 100px;
  width: 100%;
  background: orange;
  float: left;
}
.left, .right {
  width: 50%;
  height: 200px;
  float: left;
}
.left {
  background: green;
}
.right {
  background: magenta;
}

<div class="side"></div>
<div class="content">
  <div class="top"></div>
  <div class="left"></div>
  <div class="right"></div>
</div>

Answer 2

如果您想使侧栏全高，可以使用

.sidebar{
   height:100vh;
}

然后你可以给position:fixed;