为什么我的页面比 <html> 元素高？答案

【问题标题】：Why is my page taller than the <html> element?为什么我的页面比 <html> 元素高？
【发布时间】：2012-12-13 05:06:10
【问题描述】：

我很震惊。在 Internet Explorer 和 Mozilla Firefox 中，这个页面真的很高！我一直在使用 jQuery 将元素的高度设置为几乎与元素一样高。它在 Chrome 中看起来很完美，但 IE 和 FF 呈现一个非常高的页面。更奇怪的是，在使用 Firefox 的检查器时，我可以看到页面超出了元素的高度！

jQuery：

(function($){
   var resize = function(){
      var height = $('html').height();
      $('#wrap > div').height(height-38);
      $('html').height(height); // Added this to try and fix the height
   };
   $(window).resize(resize).load(resize);
})(jQuery);

HTML 布局：

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
      <!-- ... --->
   </head>
   <body>
      <div id="wrap"><div> <!-- I want the child of #wrap to be the height of the entire page. -->
         <div id="left"><div>
            <!-- ... -->
         </div></div>
         <div id="main">
            <!-- ... -->
            <div class="clear"></div>
            <div id="body">
               <!-- ... -->
            </div>
         </div>
      </div></div>
   </body>
</html>

CSS：

html{height: 100%;}
body{background: url('images/body.jpg') no-repeat fixed left top; border: 8px solid #BBB0A2; border-width: 8px 0 0 6px; min-width: 902px;}
#wrap{max-width: 1130px;}
#wrap > div{float: right;}
#main{float: left; width: 630px; height: 100%; padding: 10px 20px 20px 20px; background: #FFFFFF;}
#body{margin-top: 20px; font: 13px/18px Georgia, serif; color: #AE9073; position: relative;}

这是我正在尝试使用的网站：http://www.phoenixarizonashutters.com/

感谢您的帮助。

【问题讨论】：

是因为你有填充吗？我不是 Web 开发人员，但 main 占用了 100% 的容器 + 填充这一事实不会使它比容器大吗？
你有 20px 左右和 10px 顶部和 20px 底部填充...
不确定这是什么意思 -> "将元素的高度设置为几乎与元素一样高。"
我将你的代码从函数中取出，它在我的 ipad 上运行良好，在 safari 和 chrome 中运行良好。这是一个 js 小提琴链接：jsfiddle.net/3bSgN。我无法访问 ie，所以请尝试一下。
body 标签中缺少 height:100%。如果您希望使用所有可用的零售空间，和都需要包含此内容。

标签： jquery html css browser height

【解决方案1】：

您包含的代码没有说明问题，但是如果我访问您的网站，我可以看到这两个元素：

<div style="height: 695px;">...</div>
<div class="clear" style="height: 695px;"></div>

您的清除 div 可能不需要高度 - 删除任何导致该高度的因素，您的网站就会变得更合理。

【讨论】：

我实际上是在发布问题几个小时后发现的。感谢您的关注！我给内部包装元素一个 ID 来清除它。

【解决方案2】：

我不确定我是否理解您的要求，但您的代码有很多内联样式，这是一种不好的做法。

你的 div.clear 受到你的 jQuery 函数的影响

$('#wrap > div').height(height-38)

要防止选择器选择 .clear，您可以使用 :not 方法。

jQuery $('#wrap > div:not(".clear")').height(height-38)

【讨论】：