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

【问题标题】：How to set div height dynamically based on user's browser dimensions如何根据用户的浏览器尺寸动态设置 div 高度
【发布时间】：2013-10-20 21:57:43
【问题描述】：

使用这个例子：

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 中，但我不知道该怎么做。

【问题讨论】：

window.screen.height/window.screen.availHeight -> 都在 js 中工作
实际上只使用 CSS 会更好，也可以做到这一点。我不建议将 JS 用于这种微不足道的事情
100% 的身高应该可以，我同意 caligula...
height:100% 无法正常工作
打赌，这是你的标记工作不正确。

标签： javascript jquery

【解决方案1】：

尝试以下方法：

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

【讨论】：

@Gregg 您必须在页面中包含 jQuery。

【解决方案2】：

Div 将根据浏览器大小调整大小

$(window).on('load resize', function(){
    $('#div').height($(this).height());
    $('#div').width($(this).width());
});

【讨论】：

【解决方案3】：

尽量不用js，是不是你想要的那种效果？ http://jsfiddle.net/FhWxh/4/

更完整一点http://jsfiddle.net/FhWxh/13/show/ 整个内容大小由包装器设置（设置为 960px），页脚和页眉固定在其中，内容和侧边栏位于您之前使用的容器类中。它并不完美，但我希望它有所帮助

【讨论】：

哇，太棒了。这正是我想要的。没想到没有 JS 也能做到。非常感谢！
糟糕，但有一件事：当您增加浏览器的宽度时，容器 div 会伸展超过 960 像素并留下一个很大的空白区域。你知道这是为什么吗？
我忘了把它包起来，看看更新:)。在打 JS 之前你可以做很多事情
请注意，此解决方案实际上会使您的网站在任何移动浏览器上都毫无用处。
是的，它一起被打得很惨。如果你想要一个好的布局解决方案，我会推荐twitter.github.com/bootstrap。它有很多帮助工具，比如侧边栏和页眉/页脚等等，其中大部分都没有 JS