使左和右div視口高度為100％

Question

我正在嘗試在div上設置height:100% ，但是它不起作用。 那里是什么問題？ 誰能幫我嗎？

 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

您也可以使用視口單位 ，例如vh來避免這種情況。

Answer 2

％ height只能是“某物”的高度，因此必須設置html和body高度，以便為其中的元素設置％height：

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

Answer 3

嘗試將容器更改為絕對位置：

.container { position:absolute; }