如何根据用户的浏览器尺寸动态设置div高度

Question

使用此示例:

http://jsfiddle.net/FhWxh/

HTML:

<div id="container">
    <div id="header">
        <p>Header</p>
    </div>

    <div id="content">
        <p><b>Main content</b></p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
    </div>

    <div id="sidebar">
        <p><b>Sidebar</b></p>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        Content
    </div>

    <div id="footer">
        <p>Footer</p>
    </div>
</div>

CSS:

body {
    font: normal 16px/1.5em helvetica, arial, sans-serif
}
p {
    text-align:center;
}
#container {
    width:960px;
    margin:0px auto;
}
#header {
    text-align:center;
    background: #777;
    color:#fff;
    height:50px;
    padding:5px;
}
#content {
    float:right;
    width:610px;
    text-align:center;
    background:#ccc;
    padding:150px 5px;
}
#sidebar {
    float:left;
    width:330px;
    text-align:center;
    height:300px;
    background:#eee;
    padding:15px 5px;
    overflow:auto;
}
#footer {
    clear:both;
    text-align:center;
    background: #555;
    color:#fff;
    height:50px;
    padding:5px;
}

如何将"侧边栏"设置为用户浏览器高度的100%(减去50像素以留出标题空间)？

我相信可以使用javascript获取用户的浏览器高度并将其动态插入到css中,但我不知道该怎么做.

Answer 1

请尝试以下方法:

$('#sidebar').height($(window).height() - 50)