css - 高度 100% 属性剪裁列

Question

我有一个由三列构成的网站，每列必须是外部包装器（即页面）的 100% 高度。

我已将 html、body 和所有列设置为：

height: 100%;

但是第三列正在剪辑内容，我不知道为什么。我看过关于 SO 的类似问题，但似乎没有一个可以解决我的问题。

我在这里设置了一个 jsfiddle 示例：http: //jsfiddle.net/rTXt6/

我确信它是一个简单的解决方案，但它让我发疯，我希望有人能提供帮助。

编辑：为了更清楚一点， height: 100% 似乎将高度设置为浏览器窗口高度的 100%，它不会调整大小以考虑其可能运行时间更长的内容。

score 0 · Accepted Answer

我刚刚添加到您的代码中：

html

<div class="cf"></div>

CSS

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}

Clearfix 来自下面的链接。

score 0 · Accepted Answer

在花了一些时间之后，我似乎找到了解决方案。设置min-height:100%而不是设置divheight:100%的所有内部容器。更新的小提琴#container

score 0 · Accepted Answer

我找到了一个纯 HTML/CSS 修复并更新了 jsfiddle 以在此处显示

基本上我只是将前一个 div 中的每个 div 嵌套到最后一个（rightcol），并给每个子 div 一个较低的百分比宽度。

<div>LeftCol
    <div>CenterCol
         <div>RightCol
         </div>
    </div>
</div>

像往常一样感谢大家的投入:)

3 回答 3