将div高度设置为屏幕尺寸 [英] Set div height equal to screen size

问题描述

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

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

我想要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.

我有一个不工作的示例@ jsFiddle

I have a sample that is not working @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问题

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

EDIT -

对不起，我猜我的问题有误。

Sorry guys I guess I got my question wrong.

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

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

如果有人可以建议一个响应解决方案， p>

It would be great if someone can suggest a responsive solution

推荐答案

您还需要给父元素 height 查看这个小提琴： http://jsfiddle.net/ntLpg/17/

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

html, body {height: 100%;}

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

JavaScript方式：

JavaScript Way:

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

这篇关于将div高度设置为屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！