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

Question

我在处理具有页眉、内容、“粘性”页脚和边栏的网站布局时遇到了一些问题。粘性页脚、页眉和内容组合本身并不是问题，但我一辈子都想不出如何添加一个从页眉一直到页脚的侧边栏，而不会弄乱“粘性”页脚。

我现在接近它的方式涉及绝对定位。我基本上制作了一个页眉 div(height: 71px; top: 0px;)，一个页脚 div(bottom: 0px; height: 30px;)和一个内容 div( 顶部:71 像素；底部:30 像素；)。然后，我将边栏左侧 float 到内容 div 内，并将其高度设置为 100%，并在其旁边添加另一个 div(称为“ View ”)以显示实际网站内容。这确保侧边栏从上到下很好地排列，而页脚通常位于页面底部。

但是，当调整窗口大小时，这种方法会出现问题，尤其是当内容太大而不适合“ View ”div 本身时。这会导致页脚切断内容，向下滚动会使页脚在窗口中向上移动。我想实现一个行为类似于 this 的页脚, 但也有一个侧边栏，它总是从页面的页眉延伸到页脚。

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

Answer 1

除了 div 高度和定位之外，您认为您可以发布一些示例 HTML 和 CSS 吗？

我在想你可以再扔一个 <div>在侧边栏内 <div>并将 margin-bottom 或 padding-bottom 设置为 30px .我将为您编写 jsFiddle。