我有这个 HTML：
<body>
<div id="logo">
<table id="width100" cellpadding="0" cellspacing="0" >
<tr>
<td width="33.33%" align="left"> </td>
<td width="33.34%" align="center"><a href="http://www.rawgameshop.com/"><img src="images/logo_new.png" /></a></td>
<td width="33.33%" align="right"><img src="images/logo_right.png" /></td>
</tr>
<tr bgcolor="#731000" id="width100">
<td height="15" colspan="3" ></td>
</tr>
</table>
</div>
<center>
<div id="container">
<div id="main_body">
asd
</div>
</div>
</center>
还有这个CSS：
body {
width:100%;
height:100%;
margin:0px;
background-color:#ECECEC;
}
#logo {
width:100%;
height:165px;
background-color:#FFFFFF;
}
#width100 {
width:100%;
}
#container {
background-color:#FFFFFF;
height:100%;
width:900px;
}
#main_body {
width:800px;
background-color:#FFFFFF;
height:100%;
}
我的问题是：为什么我的不main_bodydiv 向下拉伸到页面中间？它只有字母那么高。
如果我删除<center>HTML 标签确实会向下拉伸，但在 100% 屏幕尺寸下，这意味着我必须向下滚动到末尾。我希望它位于屏幕的边缘，而不是更远的地方。
height:100%获取第一个设置了高度的父元素的高度。由于所有父对象都有一个百分比高度，因此它将直接到达主体并占据该高度的 100%。
您需要设置#logo作为百分比高度，然后是你的main_body作为其余的百分比，否则您将需要 javascript / jquery 来调整您的大小main_body因为 css 还没有启用计算的方法（尽管我认为它可能很快就会出现）
看看这篇文章，因为他们试图实现同样的目标：
使用 CSS3 计算值 https://stackoverflow.com/questions/7309170/calculate-value-with-css3
如果您要使用 jQuery 路线，您需要将 jquery 库添加到您的页面（我通常将其放在页面底部），然后在此之后的任何位置您需要包含您将要运行的脚本，如下所示：
<script type="text/javascript">
$(document).ready(function () {
var newHeight = $(window).height() - $('#logo').height();
var oldHeight = $('#container').height();
if (newHeight > oldHeight) {
$('#container').height(newHeight);
}
});
</script>
the $(document).ready(function(){})意味着一旦文档（网页）加载完成，函数内的任何内容都将被触发
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
