将div高度设置为等于屏幕大小

I have a div element in twitter-bootstrap which will have content that will overflow vertically outside the screen.

我在twitter-bootstrap中有一个div元素，其内容将在屏幕外垂直溢出。

I would like the div to take the height of the size of the browser window and let the rest of the content scroll vertically within the window.

我希望div占用浏览器窗口大小的高度，让其余内容在窗口中垂直滚动。

I have a sample that is not working @jsFiddle

我有一个不工作的样本@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>

I am posting this question after reading so questions like SO Questions

我在阅读之后发布了这个问题，所以像SO Questions这样的问题

EDIT--

编辑 -

Sorry guys I guess I got my question wrong.

对不起伙计我想我的问题出错了。

What I would like is that my div must fill the rest of the vertical space in the screen.

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

It would be great if someone can suggest a responsive solution

如果有人可以提出响应式解决方案，那就太棒了

4 个解决方案

#1

You need to give height for the parent element too! Check out this fiddle: http://jsfiddle.net/ntLpg/17/

您还需要为父元素赋予高度！看看这个小提琴：http：//jsfiddle.net/ntLpg/17/

CSS:

html, body {height: 100%;}

#content, .container-fluid, .span9
{
    border: 1px solid #000;
    overflow-y:auto;
    height:100%;
}​

JavaScript Way:

$(document).ready(function(){
    $(window).resize(function(){
        $(".fullheight").height($(document).height());
    });
});

#2

Using CSS {height: 100%;} matches the height of the parent. This could be anything, meaning smaller or bigger than the screen. Using {height: 100vh;} matches the height of the viewport.

使用CSS {height：100％;}匹配父级的高度。这可能是任何东西，意味着比屏幕更小或更大。使用{height：100vh;}匹配视口的高度。

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

According to Mozilla's official documents, 1vh is:

根据Mozilla的官方文件，1vh是：

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

等于视口初始包含块高度的1％。

#3

try this

尝试这个

$(document).ready(function(){
    $('#content').height($(window).height());
});

#4

use

使用

 $(document).height()

property and set to the div from script and set

  overflow=auto 

for scrolling

滚动