Question

我应如何设置我的内容div和footer 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;
}

Answer 1

你甚至不需要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;
}

css div定位标题内容页脚

1 个答案: