Div全高 - 没有反应

Question

我使用下面的代码来显示全高的div（带背景颜色）。

HTML

<div class="container"> 
    <div class="span5 fill"> 
     <div class="test"> 
      here is a lot of text.... 
     </div> 
    </div> 
</div> 

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css'); 

* { 
    padding: 0; 
    margin: 0; 
} 

html,body { 
height:100%; 

} 

.container { 
    height:100%; 
} 

.fill{ 
    width:50%; 
    height:100%; 
    min-height:100%; 
    background-color:#990000; 
    color:#efefef; 
} 

其实它的工作原理，但它不是响应，尽管百分比HEIGH性能。

我该如何解决这个问题？背景应该始终有相同的高度内容 - 全高...

Here you can see a picture

Answer 1

主要元素需要具有背景色。

尝试增加：

.test { 
background-color: #990000; 
margin: auto; 
} 

Answer 2

这下面的链接是这增加了文本的div的高度作为你的内容高度演示增加

.fill{ 
    width:50%; 
    height:100%; 
    min-height:100%; 
    background-color:#990000; 
    color:#efefef; 
} 

https://jsfiddle.net/maxspan/328vxn54/

Answer 3

我有时也使用是：

height:100vh; 

vh单位代表“视口高度”（也有宽度的vw），它基本上使用您的视口（大部分时间是您的浏览器窗口）的高度大小，因此这可能完全符合您的需求。

在这里，您可以检查“VH”浏览器支持：http://caniuse.com/#feat=viewport-units