html - DIV 不采用父级高度 3 列

Question

<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'>
    <div class='float_left' style='width:100px; height:100%;'>
    </div>
    <div class='float_right' style='width:100px;'>
    </div>
    <div class='clear'></div>
    <div class='content'>
         //elastic content that sometimes makes the page longer or shorter
    </div>
</div>

无论我看了多少教程或示例，都无济于事。我尝试了很多不同的组合。一旦我将 main_container 设置为 px 高度，侧边栏就会正确地占据 100% 的高度。但是我无法为主容器设置 px 高度。

---

编辑:

example

内容框不会有静态高度。到目前为止发生的是 main_container 根据内容框调整它的高度，但是两个侧边栏不会根据 main_containers 高度调整那里的高度。

Answer 1

除了 Adrift 的回答之外，您还使用以下 height: auto !important 覆盖了 height: 100% - 后者覆盖了高度设置，即使这不是问题的根源。

Here is a Gist适用于 Chrome，很可能也适用于其他现代浏览器。