css - 使用人造列和粘性页脚时使侧边栏显示 100% 高度

Question

我使用的是带有粘性页脚的两列布局。

我试图让侧边栏使用 100% 的高度，即使页面上没有太多内容。

我使用了两种技术来做到这一点。第一个是 CSS 粘性页脚 (http://www.cssstickyfooter.com/)，第二个是人造栏 (http://www.alistapart.com/articles/fauxcolumns/)。

人造列可以很好地保持两列高度相等，并根据需要扩展其中一列。

我的挑战是，如果您查看此示例 (http://visuals.customstudio.co.uk/atc/sidebar/)，您会发现边栏没有延伸到页面的整个高度。

我尝试了另一种技术，详见此处 (http://stackoverflow.com/a/6838338/557002)，您可以在此处查看 (http://visuals.customstudio.co.uk/atc/sidebar/about.html) 但这意味着如果侧边栏的内容多于主要区域，则看不到。

任何关于如何使两列都根据需要增加页面高度并一直延伸到页脚的想法都将受到极大的赞赏。

提前致谢

汤姆

Answer 1

我认为我知道你的意思 - 但解决方案偏离了人造列。我想你想让右边的列始终显示为填充内部容器的垂直高度。

要做到这一点，只需使用 <div id="outer" /> 上的背景图像即可。元素。像这样:

#outer {
url(../images/faux-columns.png) repeat-y center top;
}

希望对您有所帮助!