Css 高度100%属性剪裁列

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

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

height: 100%;

然而，第三栏是剪辑内容，我不明白为什么。我已经看过类似的问题，但似乎没有一个能解决我的问题

我在这里设置了一个JSFIDLE示例：

我相信这是一个简单的解决办法，但它让我发疯，我希望有人能帮助我

---

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

对于css浮动，您应该使用clearfix，如

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

Html

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

来自波纹管链接的Clearfix

---

看更新的

花了一点时间后，我似乎找到了解决办法。将

minheight:100%

而不是

height:100%

设置为

#container

div的所有内部容器。

我找到了一个纯HTML/CSS修复程序，并更新了JSFIDLE来显示它

基本上，我只是将每个div嵌套在上一个中，直到最后一个（rightcol），并为每个子div指定较低的百分比宽度

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

LeftCol
森特科尔
RightCol

---

感谢大家一如既往的投入：）

这和原版一样。你刚刚删除了文本，看起来像是真正的解决方案：）嗯，我明白了，误解了你的问题，很快就会更新；）嗯，是的，我也试过了，但我仍然认为有了clearfix，你的容器得到了更大div的高度（这里是

#right

），所以它应该可以做到这一点…@Morpeus恐怕不行（或者不如说没有按照我的要求去做），因为前两列没有拉伸以匹配现在正确的右列。@Dan在这种情况下，您似乎必须使用javascript@Morpheus是的，就是这个样子。感谢您的帮助：）看看这一点，在任何情况下都可以，但ofc如果您需要所有列具有相同的高度，则应使用javascript。。。

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