Question

我很震惊。在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/

感谢您的帮助。

Answer 1

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

你有一个受jQuery函数影响的div.clear

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

要阻止您的选择器选择.clear，您可以使用：not method。

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

Answer 2

您附带的代码未说明问题，但如果我访问您的网站，我可以看到以下两个元素：

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

您的清算div可能不需要高度 - 删除造成这种情况的任何内容，并使您的网站变得更合理。

为什么我的页面比元素高？

2 个答案: