视口底部的页脚不与内容重叠

Question

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

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

当视口太短或内容过多时，问题就开始了（请参阅image 2）。

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

我也不希望它走在前面。 我想要的是这个（见image 3）

内容不与footer重叠，页面滚动只滚动内容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 不同，页脚取决于容器而不是浏览器窗口。使用 jQuery，您可以：

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

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

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

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

Answer 2

如何简单地同时制作内容和页脚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：

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

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