100% 高度列答案

【问题标题】：100% Height columns100% 高度列
【发布时间】：2013-11-20 17:14:39
【问题描述】：

我创建了一个响应式布局，您可以在这里找到：http://pixelcakecreative.com/cimlife/responsive/

左右栏只是站点皮肤的占位符（左右整页广告）。我需要将这两列都延伸到页面的最底部。 html 和 body 的高度均为 100%，但由于某种原因，我无法使用 min-height:100% 将这些列延伸到底部

有什么想法吗？我正在寻找一个纯 css 解决方案，但 jquery 是一种选择。

【问题讨论】：

它们只显示浏览器宽度 1206 px+，仅供参考

标签： jquery height css

【解决方案1】：

jQuery 解决方案是：

// Set Left Column ONLY if Shorter than Document Height //
if ($('#toLeft').height() < $(document).height()){
    $('#toLeft').css('height', $(document).height()+'px');
}

// Set Right Column ONLY if Shorter than Document Height //
if ($('#toRight').height() < $(document).height()){
    $('#toRight').css('height', $(document).height()+'px');
}

我希望这会有所帮助！

【讨论】：

这是一个很好的解决方案。除非我能找到一个 css 解决方案，否则很可能最终会使用它！
我试过这个（目前正在直播），但它似乎无法正常工作。它会修改高度，但不会修改为 100%。看看，有什么想法吗？
我看到它在右栏工作，但不是在左边；给我一点时间仔细看看。
没关系以上评论。由于选择器不正确而无法正常工作的原因。它们应该是#toLeft 和#toRight

【解决方案2】：

ugg.. 是的怪癖。我通常使用 $(document).height() 作为那个 stuf。身体高度通常只是内容需要的高度，因此 100% 不起作用。

【讨论】：

【解决方案3】：

你必须使用 clearfix：http://www.webtoolkit.info/css-clearfix.html 这是纯 CSS

【讨论】：

我的 css 中已经有一个使用 .group 类的 clearfix。我尝试将其添加到两列中，它们消失了
那就用 jquery -> @dSquared

【解决方案4】：

您还需要将height: 100% 添加到所有父 div，而不仅仅是 html 或 body。

这应该可以修复您的网站：

#toLeft, #colA, body {
    height: 100%
}

【讨论】：

【解决方案5】：

html, body {
     height: 100%;
     margin: 0;
}

还有

#your-container {
     height: 100%;
}

这个对我有用。

【讨论】：