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作为页脚，它会显示有点低，但不会低于column-div，正如我所料。我也试着清楚：两者都没有改变。

我不是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;
}