javascript - 使用JS计算div高度

Question

我正在使用一些 javascript 来计算页面的高度，然后在 div 上设置一个最小高度。这样做的原因是将页脚推到内容不足的页面的底部。我的问题是最小高度大约为 30-40 像素，因此会导致滚动条。 (注意:出于各种原因，我没有使用像粘性页脚这样的解决方案，而是更喜欢这种解决方案。)

这是我的代码:

JS

$(function() {
  var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
 $("#page-content").css("min-height",height+"px");
});

HTML

 <header class="container">
 <div id="menu" class="row">
   <!-- Content -->
 </div>
</header>

<div id="page-content">
  <!-- Content --> 
</div>

<footer>
  <!-- Content --> 
</footer>

我认为问题出在我的 CSS 上。例如，我在页眉中有这样​​的边距:

#menu{
 margin: 5px auto 10px;
}

如果我删除该代码，它将稍微减少滚动条。 (我在页面上设置了其他边距，因此仅更改此边距将无法作为解决方案)。

我如何重写 JS 代码以考虑页眉和其他部分的边距？

Answer 1

<header>盒子的高度不反射(reflect) child #menu的边距，因为它们都是普通的盒子元素，如果 #page-content有边距，它们会与 #menu 重叠的边距，在这种情况下，页眉的高度将包括内容高度的某些部分，这是没有意义的。

问题是利润率下降:http://www.w3.org/TR/css3-box/#collapsing-margins

正如该页面所解释的那样，您可以通过几种方式告诉浏览器不要折叠边距:

• 添加display: inline-block;给你的#menu { }规则(我的第一个建议)
• 添加overflow: hidden;给你的header { } (如果您遇到对齐问题，可能是更好的建议)
• 让你的<header>绝对定位，或 float 它。或者对 #menu 执行此操作里面。

或者如果你想尝试一下，你可以手动计算标题高度:

var header_height = $("header").outerHeight() +
   parseInt($("header").children().css('margin-top'), 10) +
   parseInt($("header").children().css('margin-bottom'), 10);

现在我想想，这是有道理的，我认为 css 规范做的是正确的。

更新:http://jsfiddle.net/HzBSz/2/

另见:Outer element margin not equal to inner element margin