Question

这是显示其正确位置的CSS样式表

#header {
    background-color: #999;
    position: absolute;
    height: 100px;
    width: 1000px;
    left: 0px;
    top: 0px;
    background-image: url(../GFX/Web-Banner.png);
}
#content {
    background-color: #CCC;
    position: absolute;
    height: 500px;
    width: 1000px;
    left: 0px;
    top: 125px;
}
#navigation {
    background-color: #666;
    position: absolute;
    height: 100px;
    width: 1000px;
    left: 0px;
    top: 100px;
}
#footer {
    background-color: #333;
    position: absolute;
    height: 100px;
    width: 1000px;
    left: 0px;
    top: 600px;
}
.maintext {
    font-family: "Futura LT Light";
    font-size: 12px;
    font-style: normal;
    color: #000;
}

这是未显示页脚的屏幕截图（页脚颜色为灰色） enter image description here

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Josh Taylor</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="header">Content for  id "header" Goes Here
<div id="navigation">Content for  id "navigation" Goes Here</div>
</div>
<div id="content">Content for  id "content" Goes Here</div>
<div class="footer">Content for  class "footer" Goes Here</div>
</body>
</html>

Answer 1

问题是你在html中使用了class='footer'并为id页脚设置了css，所以这个主体应该可以工作：

<body>
        <div id="header">Content for id "header" Goes Here
            <div id="navigation">Content for id "navigation" Goes Here</div>
        </div>
        <div id="content">Content for id "content" Goes Here</div>
        <div id="footer">Content for class "footer" Goes Here</div>
</body>

Answer 2

HTML更改：将页脚设为id =“footer”

页脚没有显示绝对定位？

2 个答案: