-2

我应该如何设置我的内容 div 和页脚 div 的样式，以便：如果我的内容很长，那么内容 div 会花费更长的时间。页脚 div 将粘在 div 内容的底部。

<body>
<div id=master>
<div id=header>
<div id=content>
<div id=footer></div>
</div>
</div>
</div>
</body>

下面显示了我的 css，但它并没有像我想要的那样工作。

body {
background-color: #03C;
margin: 0px;
padding: 0px;
height: 100%;
}

#master {
width: 920px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
position: relative;
left: 0px;
top: 0px;
height: auto;
}

#header {
position:absolute;
width:920px;
height:100px;
z-index:1;
top: 25px;
left: 0px;
background-color: #000099;
font-size: 16px;
text-transform: uppercase;
font-style: normal;
line-height: normal;
font-weight: bolder;
font-variant: normal;
color: #FFF;
text-align: center;
margin: auto;
}

#content {
position:absolute;
width:920px;
height:900px;
z-index:2;
left: 0px;
top: 100px;
background-color: #FFFFFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 20px;
/* [disabled]padding-left: 130px; */
padding-top: 20px;
text-align: center;
}

#footer {
position:absolute;
width:920px;
height:30px;
z-index:3;
background-color: #000099;
bottom: 0px;
color: #FFF;
left: 0px;
top: 1000px;
}
4

1 回答 1

0

您甚至不需要 CSS 来实现您的要求，您已经描述了块元素的正常流程。

这将做你想要的：

<div id="header"></div>
<div id="content">
    Content here.
</div>
<div id="footer"></div>

您需要查看的主要内容是我没有在其中嵌套footer并且content我没有定位任何元素absolute，这导致了您的问题。

您的 CSS 可以大大简化为：

div#header,
div#content,
div#footer
{
    width: 920px;
    margin: 0 auto;
}

div#header
{
    height: 100px;
    background: #009;
}

div#content
{
    background: #FFF;
}

div#footer
{
    height: 30px;
    background: #009;
}
于 2012-12-14T03:16:59.397 回答