CSS - 粘性页脚 + 侧边栏问题



我在具有页眉、内容、"粘性"页脚和侧边栏的网站布局方面遇到了一些问题。 粘性页脚、页眉和内容组合本身不是问题,但我一生都无法弄清楚如何添加一个从页眉一直到页脚的侧边栏,而不会弄乱页脚的"粘性"。

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

但是,当

调整窗口大小时,这种方法会出现问题,尤其是当内容太大而无法容纳"视图"div 本身时。 这会导致页脚切断内容,向下滚动会使页脚在窗口中向上移动。我想实现一个行为像这样的页脚,但也有一个侧边栏,它总是从页眉延伸到页面的页脚。

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

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

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

您可以随时在

视图div 上放置overflow: auto

http://jsfiddle.net/dzRZd/

编辑:

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

最新更新