页脚位于视口底部，不与内容重叠

Question

我需要的是一个非常基本的布局，只有两个主要部分：内容和页脚。 页脚应始终位于视口的底部。 所以我有：

• 内容（位置：相对）
• 页脚（位置：固定；底部：0px） 当我的内容很少时，这很有效（请参阅图片 1）。

当视口太短或有大量内容时，问题就会出现（请参阅图片 2）。

内容位于页脚后面（重叠），并且出现页面滚动。

我也不想让它走在前面。 我想要的是这样的（参见图片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 中有一个滚动条。我真的不喜欢这样。

有没有使用主页面滚动来滚动容器内容？

再次感谢您的宝贵时间

Answer 1

如何简单地将内容和页脚设置为 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/）。这可能是一个更好的做法，因为固定位置不那么跨浏览器兼容。

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

编辑2：

http://jsfiddle.net/bAtVE/2/

Answer 2

在下面的示例中，即使父元素中的内容溢出，页脚也将保持固定。容器尺寸可以是动态的，页脚宽度也会相应调整。页脚依赖于容器而不是浏览器窗口，这与 position:fixed 不同。使用 jQuery，您可以执行以下操作：

var cw = $('#container').innerWidth();

$('#header').css({
    'width': cw + "px"
});

$('#container').scroll(function() {
    $('#header').css({
        'bottom': -$('#container').scrollTop()
    })
})

在 http://jsfiddle.net/M2n8Q/ 查看工作示例

Answer 3

将页脚固定到底部并为其设置与背景颜色相同的 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;
}

演示： jsfiddle.net/Marcel/xgafM