Html 页脚不以绝对位置显示？_Html_Css

Html 页脚不以绝对位置显示？

html css

Html 页脚不以绝对位置显示？,html,css,Html,Css,下面是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; positi

下面是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;
}

下面是未显示页脚的屏幕截图（页脚颜色为灰色）


乔什·泰勒
id“header”的内容位于此处
id“导航”的内容位于此处
id“Content”的内容在这里
“footer”类的内容在这里

问题是您在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>


id“header”的内容位于此处
id“导航”的内容位于此处
id“Content”的内容在这里
“footer”类的内容在这里

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

任何HTML都可以吗？如果这个CSS显示了正确的位置，那么错误的位置在哪里呢？fidler会有所帮助。你不需要在这些元素上使用position:absolute。你通常不应该使用绝对定位来布局网站。如果从所有元素中删除position:absolute和top和left position，则它们将堆叠在一起。如果你需要元素在一起浮动，看看CSS浮动。我相信这会让你大吃一惊：）@Ted ha ha ha ha有时会发生，兄弟。问题可以用小的解决方案来解决，但我们被问题弄得一团糟，以至于简单的解决方案并没有出现在我们的脑海中

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