100% 高度列

Question

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

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

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

Answer 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');
}

我希望这有帮助！

Answer 2

呃..是的怪癖。我通常使用 $(document).height() 来表示这些东西。正文高度通常仅与内容需要的高度相同，因此 100% 不起作用。

Answer 3

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

Answer 4

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

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

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

Answer 5

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

这

#your-container {
     height: 100%;
}

对我有用。