我需要的是一个非常基本的布局，只有两个主要部分：内容和页脚。 页脚应始终位于视口的底部。 所以我有：
当视口太短或内容很多时，问题就开始了（请参阅image 2）。
内容位于页脚后面（重叠），页面滚动出现。
我也不希望它走在前面。 我想要的是这个（见image 3）
内容与页脚不重叠，页面滚动仅滚动内容div。
我不知道如何实现，或者即使可以完成。 我不介意使用jquery，我不关心ie6。 任何帮助将非常感激
由于
修改：
感谢您的回复。
我正在上传几张图片，以便您更好地了解我需要的内容。
在图片1 http://estudioibarra.com/test/image1.jpg中，您可以看到我想要的设计，在图片2中http://estudioibarra.com/test/image2.jpg是相同的图片，并附有一些解释。
我想要的是标题始终位于视口底部，因为是我的菜单。我不希望内容与我的菜单重叠。因为内容将有3个以上的项目。
我不想要的是这个http://estudioibarra.com/test/image3.jpg（内容出现在菜单后面）。
使用你的一些解决方案，我可以解决这个问题，但前提是我在容器div中有一个滚动条。我真的不喜欢那样。
是否使用主页面滚动滚动容器内容??
再次感谢您的时间
答案 0 :(得分：4)
如何简单地制作内容和页脚position: fixed并根据需要放置它们，例如此演示：http://jsfiddle.net/bAtVE/？
#content {
position: fixed;
height: 85%;
width: 95%;
border: 1px blue solid;
overflow-y: auto;
}
#footer {
position: fixed;
height: 10%;
width: 95%;
bottom: 0;
border: 1px red solid;
}
<div id="content">
here is content
</div>
<div id="footer">
This is footer
</div>
修改：
这次我使用了position: absolute（参见http://jsfiddle.net/bAtVE/1/）。这可能是一种更好的做法，因为fixed位置不是跨浏览器兼容的。
#content {
position: absolute;
top: 0;
left: 0;
height: 85%;
width: 100%;
overflow-y: auto;
}
#footer {
position: absolute;
bottom: 0;
left: 0;
height: 10%;
width: 100%;
}
<强> EDIT2 ：
答案 1 :(得分：1)
在下面的示例中，即使父元素中的内容溢出，页脚仍将保持固定状态。容器尺寸可以是动态的，并且页脚宽度将相应地调整。与position:fixed不同，页脚依赖于容器而不是浏览器窗口。使用jQuery，您可以：
var cw = $('#container').innerWidth();
$('#header').css({
'width': cw + "px"
});
$('#container').scroll(function() {
$('#header').css({
'bottom': -$('#container').scrollTop()
})
})
答案 2 :(得分：1)
如何将页脚固定到底部并为其提供与背景颜色相同的border-top？
body { background:#eeeeed; }
#wrap { width:34em; margin:0 auto; }
#head, #foot { padding:1em 2em; }
#head, #main { background:#fff; }
#main { padding:0 2em 6em; }
#foot {
bottom:0;
color:#fff;
width:30em;
position:fixed;
background:#444;
text-align:center;
border-top:1em solid #eeeeed;
}