如何使div使用100％可用高度(减去顶部徽标高度) [英] How to make a div use 100% available height (minus top logo height)
问题描述
我有这个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_body div为什么不延伸到页面中间?它只有字母高.
My question is: why doesn't my main_body div stretch down across the middle of the page? It is only as tall as the letters.
如果我删除了<center> HTML标记，它确实会向下拉伸，但是在100％的屏幕尺寸下，这意味着我必须向下滚动到末尾.我希望它能出现在屏幕边缘，而不是更远.
If I remove the <center> HTML tags it does stretch down, but at 100% screen size, that means I have to scroll down to the end. I wanted it to be to the edge of the screen, not further.
推荐答案
height:100%采用设置了高度的第一个父元素的高度.由于您所有父对象的高度都有一定百分比，因此它将直接上升到身体并占据该高度的100％.
height:100% takes the height of the first parent element that has a height set on it. As all your parent objects have a percentage height on it will go right up to the body and take 100% of that height.
您要么需要将#logo设置为百分比高度，然后将main_body设置为其余百分比，否则您将需要javascript/jquery来调整main_body的大小，因为css尚未启用进行计算(尽管我认为可能会很快到来)
You will either need to set #logo as a percentage height and then your main_body as the rest of the percentage otherwise you will need javascript / jquery to resize your main_body as css hasn't enabled a way to do calculations yet (although I think it may be coming soon)
在他们试图实现同一目标时，请看一下这篇文章:
Have a look at this post as they were trying to achieve the same thing:
如果要使用jQuery路由，则需要将jquery库添加到页面中(我通常将其放在页面底部)，然后在此之后的任何地方都需要包含脚本，您将像所以:
If you are going the jQuery route you will need to add the jquery library to your page (I usually put this at the bottom of the page) and then anywhere after this you need to include your script you are going to run like so:
<script type="text/javascript">
$(document).ready(function () {
var newHeight = $(window).height() - $('#logo').height();
var oldHeight = $('#container').height();
if (newHeight > oldHeight) {
$('#container').height(newHeight);
}
});
</script>
$(document).ready(function(){})表示一旦文档(网页)加载完成，函数中的所有内容都会被触发
the $(document).ready(function(){}) means that anything that is within the function will be fired once the document (web page) has finished loading
这篇关于如何使div使用100％可用高度(减去顶部徽标高度)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
