我很吓人在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/

谢谢你的帮助。

最佳答案

您包含的代码无法证明问题所在,但是如果我访问您的网站,则可以看到以下两个元素:

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


您的clearing div可能不需要高度-删除造成这种高度的任何东西,您的网站就会变得更加合理。

关于jquery - 为什么我的页面比<html>元素高?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13846158/

10-14 13:52
查看更多