我有以下 css 问题，想知道是否有办法通过设置绝对高度值来解决它。我的代码如下，
<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>
我已将高度属性设置为 100%，但这并没有像人们期望的那样覆盖整个白色背景。如有任何帮助，我们将不胜感激。
谢谢。
最佳答案
将高度设置为 100% 表示当前视口(viewport)高度的 100%。如果您的页面比浏览器视口(viewport)长，则 div 太短。使用自动高度让高度为您正确计算。
将内容的高度设置回自动(删除 height: 100%):
#content {
width:1000px;
background-color:white;
}
并从您的广告中删除 position: absolute(或替换为 position: relative)，以便在计算父级的 ( #content 的)高度:
#ad {
padding:1em;
margin-top:0px;
margin-left:814px;
width:186px;
background-color:red;
height:800px;
}
现在您的内容和您期望的一样长。
关于html - css 高度属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8833599/