CSS - 粘性页脚+侧栏问题

时间:2012-04-28 03:31:34

标签: html css sidebar sticky-footer

我在使用标题,内容,“粘性”页脚和侧边栏的网站布局时遇到了一些麻烦。粘性页脚,标题和内容组合本身并不是问题,但我不能为我的生活弄清楚如何添加从标题一直到页脚的侧边栏而不会弄乱“粘性”页脚。

我接近它的方式现在涉及绝对定位。我基本上创建了一个标题div(height: 71px; top: 0px;),一个页脚div(bottom: 0px; height: 30px;)和一个内容div(top:71px;bottom:30px;)。然后我将内边栏中的侧边栏浮动并使其高度为100%,并在其旁边添加另一个div(称为“视图”)以获取实际网站内容。这样可以确保侧边栏从顶部到底部很好,页脚通常位于页面底部。

然而,当调整窗口大小时,这种方法会出现问题,尤其是当内容太大而无法放入“视图”div本身时。这导致页脚切断内容,向下滚动使页脚在窗口中向上移动。我想实现一个行为类似于this的页脚,但也有一个侧栏,始终从页面的页眉到页脚。

如果有人想到一种方法可以在上面链接的页面上添加这样的侧边栏,或者对如何解决这个问题有任何想法,我将不胜感激。先谢谢。

2 个答案:

答案 0 :(得分:1)

除了div高度和定位之外,你认为你能发布一些HTML和CSS吗?

我在想的是你可以在侧边栏<div>内扔另一个<div>并将边距底部或填充底部设置为30px。我会为你做一个jsFiddle。

答案 1 :(得分:0)

您始终可以在视图div上添加overflow: auto

http://jsfiddle.net/dzRZd/

修改

使用固定定位: http://jsfiddle.net/ekSvQ/2/