100％高度列

Question

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

左右列只是网站皮肤的占位符（左右整页广告）。我需要这两列都扩展到页面的最底部。 html和body的高度均为100％，但出于某种原因，我无法通过min-height:100%

将这些列扩展到底部

有什么想法吗？我正在寻找一个纯粹的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

ugg ..是的怪癖。我通常使用$（document）.height（）来获取该stuf。身体高度通常只有内容需要它，所以100％不起作用。

Answer 3

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

Answer 4

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

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

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

Answer 5

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

并且

#your-container {
     height: 100%;
}

这个对我有用。