html页脚顶两边,HTML：错误的页脚位置：内格比外层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是“更大”，这意味着它有低于页脚的东西。请参阅：

如果我使用的位置是：相对页脚，它会显示一个低一点，但不低于列-DIV为我所期望的。我也清楚地试过：两者都没有改变任何东西。

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

+1

为什么你绝对定位的div？ –

2012-08-08 10:45:08

+1

检查到这个http://tinkerbin.com/38CF0j5b –

2012-08-08 10:50:29

+0

@DaveHogan头部和脚应该始终在页面的顶部和底部？但看起来这并不如预期的那样。 –

2012-08-08 11:14:48