我很生气。在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/