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: 100%覆盖height: auto !important - 后者会覆盖高度设置，即使它不是问题的根源。

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

Answer 2

此解决方案使用CSS表格单元格，允许左/右侧边栏占据中央.content面板的高度。

HTML：

<div class='main_container'>
    <div class='left_bar'></div>
    <div class='content'>
        <p>Elastic content that sometimes makes the page longer or shorter</p>
        <p>Lorem ipsum dolor sit amet, ...</p>
    </div>
    <div class='right_bar'></div>
</div>

CSS：

.main_container {
    display: table;
    width: 100%;
}
.left_bar {
    display: table-cell;
    width: 100px;
    background-color: lightgray;
}
.right_bar {
    display: table-cell;
    width: 100px;
    background-color: lightgreen;
}
.content {
    padding: 0 20px;
}

演示小提琴：http://jsfiddle.net/audetwebdesign/zahPD/

根据其他评论的建议，您可以根据申请中的要求指定height: 100%或height: inherit至.main_container。

table-cell的{p> 参考：https://developer.mozilla.org/en-US/docs/Web/CSS/display

向后兼容性
适用于IE8及以上版本。

Answer 3

Div不支持使用xhtml文档的高度百分比。你使用这样的技巧：

.main_container{
    position:fixed;
    top:0;bottom:0;
    right:0;left:0;
}

我在这里写了一个例子：http://jsfiddle.net/vF6fY/看看它

DIV没有采用父高3列

3 个答案: