0 
<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 高度。

编辑：

例子

内容框不会有静态高度。到目前为止，main_container 会根据内容框调整其高度，但两个侧边栏不会根据 main_containers 高度调整高度。

4

3 回答 3

2

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

这是适用于 Chrome 的 Gist，很可能也适用于其他现代浏览器。

于 2013-07-30T19:52:00.577 回答
1

此解决方案使用 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

参考：httpstable-cell : //developer.mozilla.org/en-US/docs/Web/CSS/display

向后兼容性
适用于 IE8 及更高版本。

于 2013-07-30T20:14:07.447 回答
0

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

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

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

于 2013-07-30T19:52:13.573 回答