我似乎无法让我的页脚 div 转到底部。它总是在我的容器 div 的底部，但我的容器 div 总是高度:0。我尝试将溢出设置为隐藏在容器 div 中，但高度仍然为 0，这使我所有其他 div 都消失了。怎么了？这是我的 css 和 html。
谢谢。
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body background="images/bg.png">
<div id="contentcontainer">
<div id="header">
<img src="images/banner.png" />
</div>
<div id="nav">
</div>
<div id="form">
<!--This is where the form goes-->
</div>
<div id="content">
<!--This is where the content goes-->
</div>
<div id="submission"></div>
<div id="footer">
<p id="footertext">Copyright © 2013 me.com. All rights reserved.</p>
</div>
</div>
</body>
</html>
CSS:
@charset"utf-8";
/* CSS Document */
#submission {
width:500px;
height:175px;
position:absolute;
left:320px;
top:225px;
}
#header {
width: 820px;
height: 200px;
position: absolute;
left: 0px;
top: 0px;
}
#nav {
width: 820px;
height: 50px;
position: absolute;
left: 0px;
top: 150px;
}
#form {
background-color: #FFFFFF;
width: 820px;
height: 175px;
position: absolute;
left: 0px;
top: 200px;
border-bottom: 1px;
border-bottom-color: #666666;
border-bottom-style: dashed;
}
#content {
border: hidden;
background-color: #FFFFFF;
width: 820px;
position: absolute;
left: 0%;
top: 376px;
min-height: 1200px;
height: auto;
}
#footer {
background-color: #666666;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
}
#footertext {
color: #FFF;
text-align: center;
position: absolute;
}
#contentcontainer {
height: 100%;
width: 820px;
position: relative;
top: -10px;
background-color: #FFF;
left: 20%;
}
最佳答案
容器 div 的高度为零，因为所有子项都定位为绝对。如果您可以在没有绝对定位的情况下实现相同的效果，您会注意到容器 div 实际上占用了一些空间。
让一切都绝对定位不是一个好主意。
关于css - 我的 div 布局有什么问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20837917/