css - 设置 div 高度等于屏幕尺寸

Question

我在 twitter-bootstrap 中有一个 div 元素，它的内容会垂直溢出到屏幕之外。

我希望 div 的高度与浏览器窗口的大小一致，并让其余内容在窗口内垂直滚动。

我有一个样本不工作@ jsFiddle

#content {
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">Side Bar</div>

        <div class="span9" id="content">
            Content Bar Example Content
        </div>
    </div>
</div>

我在阅读了类似 SO Questions 的问题后发布了这个问题

编辑--

对不起大家，我想我的问题错了。

我想要的是我的 div 必须填充屏幕中其余的垂直空间。

如果有人能提出一个响应式的解决方案就太好了

Answer 1

使用 CSS {height: 100%;} 匹配父元素的高度。这可以是任何东西，意思是比屏幕小或大。使用 {height: 100vh;} 匹配视口(viewport)的高度。

.container {
    height: 100vh;
    overflow: auto;
}

根据 Mozilla's官方文档，1vh是:

Equal to 1% of the height of the viewport's initial containing block.