1

我正在使用一些 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 代码以考虑页眉和其他部分的边距？

4

5 回答 5

1

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

问题是边距折叠：http ://www.w3.org/TR/css3-box/#collapsing-margins

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

  • 添加display: inline-block;到您的#menu { }规则中（我的第一个建议）
  • 添加overflow: hidden;到您的header { }（如果您遇到对齐问题，可能是更好的建议）
  • 使您的<header>绝对定位，或浮动它。或者对#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/

另请参阅：外部元素边距不等于内部元素边距

于 2012-11-15T03:42:15.603 回答
1

由于某种原因，JS 没有计算边距。我添加了页眉和页脚中的边距，它们总计 45 像素。因此脚本现在看起来像这样：

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

我添加了 45px，脚本现在可以正常运行。

于 2012-11-18T00:38:51.173 回答
0

为什么不手动将页脚放在底部？我的意思是，我知道你说过你不愿意，但为什么呢？如果您希望它始终存在，请执行

position:relative;
bottom:0;

如果您希望它与页面的其余部分一起滚动（听起来像是），请使用

position:absolute;

反而。这是一种比动态插入虚拟内容来推动页脚更好的方法。

于 2012-11-15T03:37:37.950 回答
0

也许你看看这个 http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page 可能会解决你的问题。

于 2012-11-15T04:17:40.620 回答
0

为所有元素尝试 .outerHeight(true) 而不是 .height() 或 .outerHeight()：

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

.height() - 返回元素的高度，不包括内边距、边框和边距。

.innerHeight() - 返回元素的高度，包括填充但不包括边框和边距。

.outerHeight() - 返回 div 的高度，包括边框但不包括边距。

.outerHeight(true) - 返回 div 的高度，包括边距。

于 2012-11-15T05:32:17.103 回答