使用假列和粘性页脚时，让侧边栏显示 100% 高度答案

【问题标题】：Getting a sidebar to appear 100% height when using faux columns and a sticky footer使用假列和粘性页脚时，让侧边栏显示 100% 高度
【发布时间】：2012-02-21 10:35:34
【问题描述】：

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

我正在尝试让侧边栏使用 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) 但这意味着如果侧边栏的内容比主区域多，它就不会被看到。

任何关于如何使两列都根据需要增加页面高度并一直延伸到页脚的想法将不胜感激。

提前致谢，

汤姆

【问题讨论】：

标签： css sidebar sticky-footer

【解决方案1】：

我认为我知道你的意思 - 但解决方案偏离了假列。我认为您要使右列始终显示为填充内部容器的垂直高度。

为此，只需使用<div id="outer" /> 元素上的背景图像。像这样：

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

希望有帮助！

【讨论】：

这么简单，我怎么没想到 ;-)。谢谢 Inrbob！

【解决方案2】：

给你的.main-centre 一个min-height 怎么样？我不知道我是否正确，但这对我来说看起来不错。

顺便说一句，您的许多填充和边距已过时，可能会导致跨浏览器问题。

【讨论】：

【解决方案3】：

我认为你的about.html 的问题在于这个css code：

.main-wide {
overflow: auto;
padding-bottom: 266px; /* footer height */
}

当您尝试扩展您的sidebar 时，它被.main-wide 的overflow 隐藏，尝试将自定义width 赋予sidebar 和main-wide，例如：

.main-wide {
 width:75%; //or whatever you want in ratio or pixels
overflow: auto;
padding-bottom: 266px; /* footer height */
}

和

.sidebar{ //any sidebar class
   width:25%;
   min-height:300px; //or as your wish
 }

附： : 我不是专业的网络开发人员，但知识很少。希望对你有帮助。

【讨论】：