css身高属性
[英]css height property
问题描述
I have the following issue with css and was wondering whether there is a way to solve it by setting an absolute height value. 
我有css的以下问题，并想知道是否有办法通过设置绝对高度值来解决它。 The code I have is as follows, 我的代码如下，
<style type="text/css" media="screen">
html { height:100%; }
body { background: black; height:100%; }
#menud {
position:absolute;
padding:1em;
height:300px;
background-color:#eaeaea;
width:184px;
}
#menue {
position:absolute;
margin-top:300px;
padding:1em;
height:900px;
width:184px;
background-color:red;
}
#data {
position:absolute;
margin-top:0px;
margin-left: 184px;
width:630px;
height:600px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#ad {
position:absolute;
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
#content {
width:1000px;
background-color:white;
height:100%;
}
#info {
margin-top:0px;
width:1000px;
}
</style>
<html>
<body>
<div id='content'>
<div id='info'>
<div id='menua'>test</div>
<div id='menub'>test</div>
<div id='data'>test</div>
<div id='ad'>test</div>
</div>
</div>
</body>
</html>
I have set the height property to 100% but this does not cover the whole background white as one would expect it to. 我已将height属性设置为100％，但这并未涵盖整个背景白色，正如人们所期望的那样。 Any help on this would be appreciated. 任何有关这方面的帮助将不胜感激。
Thanx. 感谢名单。
3 个解决方案
解决方案1
2 2012-01-12 10:54:08
Setting the height to 100% means 100% of the current viewport height. 将高度设置为100％表示当前视口高度的100％。 If your page is longer than the browser viewport, the div is too short. 如果您的页面长于浏览器视口，则div太短。 Use auto height to let the height get calculated correctly for you. 使用自动高度可以正确计算高度。
Set the height of content back to auto (remove height: 100% ): 将内容的高度设置回自动（删除height: 100% ）：
#content {
width:1000px;
background-color:white;
}
and remove the position: absolute from your ad (or replace with position: relative ), so that the ad's height is respected when calculating the parent's ( #content 's) height: 并删除广告中的position: absolute （或替换为position: relative ），以便在计算父级（ #content ）的高度时尊重广告的高度：
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
now your content is as long as you would expect. 现在你的内容和你期望的一样长。
解决方案2
0 2012-01-12 10:39:05
100% height is relative to the container. 100％高度相对于容器。 To cover the whole background, you will have to use javascript. 要覆盖整个背景，您必须使用javascript。 On page load you set the height to the window height. 在页面加载时，您将height设置为窗口高度。
You can use jQuery , to do this: in that case 您可以使用jQuery来执行此操作：在这种情况下
$("#content").css('height', $(window).height());
解决方案3
0 2012-01-12 10:44:50
You might have to remove paddings and margins from the body, like body { margin: 0; padding: 0; } 您可能必须从正文中删除填充和边距，如body { margin: 0; padding: 0; } body { margin: 0; padding: 0; } body { margin: 0; padding: 0; } , for the relative-positioned container div to cover the whole height. body { margin: 0; padding: 0; } ，为相对定位的容器div覆盖整个高度。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.