Css 我的分区布局有什么问题？_Css_Html

Css 我的分区布局有什么问题？

css html

Css 我的分区布局有什么问题？,css,html,Css,Html,我似乎无法使我的页脚div降到底部。它始终位于容器div的底部，但容器div的高度始终为0。我尝试将溢出设置为隐藏在容器div中，但高度仍然为0，这使我的所有其他div都消失了。怎么了？这是我的css和html 谢谢 HTML: 容器div的高度为零，因为所有子对象都定位为绝对值。如果您可以在没有绝对定位的情况下实现同样的效果，那么您会注意到container div实际上占用了一些空间把所有东西都放在绝对位置不是一个好主意。因为页脚在容器div中。把它放在身体的末端，看看是否有效。旁注：您可

我似乎无法使我的页脚div降到底部。它始终位于容器div的底部，但容器div的高度始终为0。我尝试将溢出设置为隐藏在容器div中，但高度仍然为0，这使我的所有其他div都消失了。怎么了？这是我的css和html

谢谢

HTML:

容器div的高度为零，因为所有子对象都定位为绝对值。如果您可以在没有绝对定位的情况下实现同样的效果，那么您会注意到container div实际上占用了一些空间

把所有东西都放在绝对位置不是一个好主意。

因为页脚在容器div中。把它放在身体的末端，看看是否有效。旁注：您可能应该使用像content\u container/footer\u text或content container/footer text或contentContainer/footer text这样的名称。它提高了可读性，只是把它放在了屏幕的底部。我希望它随着内容的缩放大小而移动。在我的容器底部。谢谢你的回复。你想让你的页脚底部粘粘的吗？你能创建一把小提琴吗？（给你的

一个min height
给你的#contentcontainer
可能会有效果）contentcontainer
高度总是零，因为它的所有子元素都是绝对的。如果您事先知道所有子元素的高度及其位置，则进行一些计算，并将contentcontainer
的高度设置为某个固定值，如990px。
<!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>

@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%;
}