Question

我似乎无法让我的页脚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%;
}

Answer 1

容器div的高度为零，因为所有子项都定位为绝对值。如果你可以在没有绝对定位的情况下实现同样的目标，你会发现容器div实际上占用了一些空间。

让一切都绝对定位不是一个好主意。

我的div布局有什么问题？

1 个答案: