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 单位代表“视口高度”（宽度也是vw），它基本上使用您的视口（大部分时间是您的浏览器窗口）高度尺寸，因此这可能适合您的需要完美。

您可以在此处查看“vh”的浏览器支持：http://caniuse.com/#feat=viewport-units

Answer 2

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

尝试添加：

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

Answer 3

以下链接是一个演示，随着内容高度的增加，它会增加文本div的高度

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

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

Div全高 - 没响应

3 个答案: