Question

我对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>

我已将height属性设置为100％，但这并未涵盖整个背景白色，正如人们所期望的那样。任何有关这方面的帮助将不胜感激。

感谢名单。

Answer 1

将高度设置为100％表示当前视口高度的100％。如果您的页面长于浏览器视口，则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;
}

现在您的内容与您期望的一样长。

Answer 2

100％的高度是相对于容器的。要覆盖整个背景，您必须使用javascript。在页面加载时，您将height设置为窗口高度。

您可以使用jQuery来执行此操作：在这种情况下

$("#content").css('height', $(window).height());

Answer 3

您可能需要从正文中移除填充和边距，例如body { margin: 0; padding: 0; }，以便相对定位的容器div覆盖整个高度。

css身高属性

3 个答案: