html - 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;
}

实际上它可以工作，但它没有响应，尽管百分比高度属性。

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

Here you can see a picture

Answer 1

我有时也用的是:

height:100vh;

vh 单位代表“视口(viewport)高度”(也有 vw 代表宽度)，它基本上使用您的视口(viewport)(大部分时间是您的浏览器窗口)高度大小，所以这可能适合您完美的需求。

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