使视图的左、右div 100%高

Question

我正在尝试将height:100%设置为div，但它不起作用。有什么问题吗？有人能帮我吗？

​

body{
  background-color:black;
}
.container {
  position: relative;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 1170px;
  min-width: 300px;
  margin-top: 47px;
  margin-right: auto;
  margin-left: auto;
  min-height: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.left {
  width: 20%;
  height: 100%;
  float: left;
  position: absolute;
  bottom: 0px;
  background-color: #364150;
  border-left: 1px solid #3d4957;
  max-height: none !important;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  left:0px;
}
.right {
  width: 80%;
  float: right;
  background-color: #ffffff;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 10px;
  min-height: 100%;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: scroll;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

​

Answer 1

还需要将height设置为所有父容器。

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

更新- http://codepen.io/anon/pen/WvJpyM

您还可以使用viewport units，例如vh来避免这种情况。

Answer 2

% height只能是“某某物”的高度，因此必须设置html和body高度，以设置元素的%高度：

html, body{
  background-color:black;
  height: 100%;   
}

Answer 3

尝试将容器更改为绝对位置：

.container { position:absolute; }