html - html：页脚位置错误：内部 div 大于外部 div

Question

我有以下布局结构：

<div id="wrapper">
    <div id="head"></div>
    <div id="columns">
        <div id="menu"></div>   
        <div id="content"></div>
    </div>            
    <div id="foot">
        <div id="copyright"></div>
        <div id="username"></div>
    </div>
</div>

用这个CSS：

div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:1000px;    
}

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;      
}

div#menu {
    position:absolute;
    width:250px;
    top: 0px;
    left:0px;
}

div#content {
    position: relative;
    width: 750px;
    top: 0px;
    left: 250px;
}

div#foot {      
    position: absolute;
    width: 1000px;
    bottom: 20px;
    left: 0px;
}

问题是，页脚在页面中“向上”显示并且内容 - div“更大”，这意味着它在页脚下方有东西。看：

如果我使用 position: relative 作为页脚，它会显示得稍微低一些，但不会像我预期的那样低于 columns-div。我也尝试过 clear:both 但这并没有改变任何东西。

我不是 css 专家，所以有人可以发布解决方案并解释为什么以这种方式显示页脚吗？

Answer 1

    <style>

div#wrapper {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:1000px;    
}

div#head {
    position: absolute;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}

div#columns {
    position: relative;
    width: 1000px;
    top: 50px;      
}

div#menu {
    position:absolute;
    width:250px;
    top: 0px;
    left:0px;
}

div#content {
    position: relative;
    width: 750px;
    top: 0px;
    left: 250px;
}

div#foot {
    margin-top:25px;   
    width: auto;
  }

    </style>


 <div id="wrapper">
    <div id="head"></div>
    <div id="columns">
        <div id="menu"></div>   
        <div id="content"></div> <div id="foot">
        <div id="copyright">Footer</div>
        <div id="username"></div>
    </div>
    </div>            

</div>

Answer 2

好的，DaveHogans 的评论引导我找到以下解决方案：

div#wrapper {    
    position:relative;
    margin-left:auto;
    margin-right:auto;
    top: 20px;
    width:1000px;   
}

div#head {
    position: relative;
    width:1000px;
    height:50px;
    left:0px;
    top: 0px;
}

div#columns {
    position: relative;
    width: 1000px;
}

div#menu {
    position:absolute;
    width:250px;
    top: 0px;
    left:0px;
}

div#content {
    position: relative;
    width: 750px;
    top: 0px;
    left: 250px;
}

div#foot {  
    clear:both;
    position: relative;
    width: 1000px;
    padding-top: 10px;  
    padding-bottom: 50px;
}