0

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

谢谢你的帮助。

4

2 回答 2

2

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

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

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

为了防止您的选择器选择 .clear 您可以使用 :not 方法。

jQuery $('#wrap > div:not(".clear")').height(height-38)
于 2012-12-12T19:01:36.813 回答
2

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

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

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

于 2012-12-12T19:15:47.103 回答