JQuery：动态高度（）与窗口调整大小（）答案

【问题标题】：JQuery: dynamic height() with window resize()JQuery：动态高度（）与窗口调整大小（）
【发布时间】：2011-12-29 04:17:12
【问题描述】：

我遇到了与此海报相同的问题： Jquery problem with height() and resize()

但该解决方案无法解决我的问题。我有三个堆叠的 div，我想使用 JQuery 使中间的高度调整为窗口高度的 100%，减去其他顶部和底部 div 的高度 (23px * 2)。它适用于调整大小，但在文档最初加载时它会关闭（短）16px。

HTML

<body>
<div id="bg1" class="bg">top</div>
<div id="content">
    help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>

CSS

html,
body {
    width:100%;
    height:100%;
}

.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}

#content {
width:450px; 
margin:0 auto;
text-align: center;
}

jQuery

$(document).ready(function(){
    resizeContent();

    $(window).resize(function() {
        resizeContent();
    });
});

function resizeContent() {
    $height = $(window).height() - 46;
    $('body div#content').height($height);
}

【问题讨论】：

我在寻找这样的东西吗？还是页脚应该随页面移动？ cssplay.co.uk/layouts/basics2.html 提琴就好了！
我可以做类似的事情，但我坚持使用将在服务器端生成的 HTML。我被要求用 JQuery 解决这类问题。
9000px 文本缩进是怎么回事？
参见“使用文本缩进隐藏文本”：reference.sitepoint.com/css/text-indent

标签： jquery html css

【解决方案1】：

最简洁的解决方案 - 也是纯 CSS - 将使用 calc 和 vh。

中间div的高度会这样计算：

#middle-div { 
height: calc(100vh - 46px); 
}

即视口高度的 100% 减去 2*23px。这将确保页面正确加载并且是动态的(demo here)。

还记得使用 box-sizing，所以填充和边框不会使 div 超出视口。

【讨论】：

几乎所有当前的浏览器都支持 calc（这里：caniuse.com/#feat=calc）和 vh 一样（这里：caniuse.com/#feat=viewport-units）

【解决方案2】：

好的，来个 CSS 答案怎么样！我们使用display: table。然后每个 div 都是行，最后我们将 100% 的高度应用到中间的“行”，瞧。

http://jsfiddle.net/NfmX3/3/

body { display: table; }
div { display: table-row; }
#content {
    width:450px; 
    margin:0 auto;
    text-align: center;
    background-color: blue;
    color: white;
    height: 100%;
}

【讨论】：

男人！我知道只有 CSS 解决方案！你启发了我。伙计们，在任何 JS 解决方案之前，更喜欢这种非 JS 解决方案。它不那么干净，您可能需要使用一些额外的标记，但仍然值得。
为什么人们认为 CSS 总是比 JS 好？
@barell 这并不总是更好，但是在涉及到演示的地方，通常最好单独使用样式，而不是实现行为/逻辑。另一个好处是 CSS 在设计上具有弹性，而 JavaScript 在设计上很脆弱。

【解决方案3】：

我觉得应该有一个没有 javascript 的解决方案，但这是怎么回事？

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() {
    $('#content').height($(window).height() - 46);
});

$(window).trigger('resize');

【讨论】：

其实一行就可以搞定。更短！
我想你会发现以下更好/更有活力：$('#dataview').height($(window).height() - $('#dataview').offset().top - 10);

【解决方案4】：

要在调整大小时（或之后）查看窗口高度，请尝试：

$(window).resize(function() {
$('body').prepend('<div>' + $(window).height() - 46 + '</div>');
});

【讨论】：