将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问题这样的问题

编辑 -

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

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

如果有人可以建议一个响应式解决方案,那就太好了

Answer 1

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

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

根据Mozilla的官方文件,1vh是:

等于视口初始包含块高度的1%.

Answer 2

你也需要给height父元素!看看这个小提琴.

CSS:

html, body {height: 100%;}

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

JavaScript(使用jQuery)方式:

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

Answer 3

试试这个

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

Answer 4

使用简单的 CSS高度：100%；匹配父级的高度并使用height: 100vh匹配视口的高度。

使用vh而不是% ;

Answer 5

使用

$(文档).height()

属性并设置为脚本中的 div 并设置

  溢出=自动

用于滚动