动态分配水平div高度

Question

嗨我在向div区域动态分配高度时遇到了问题。

以下是我需要生成的演示布局类型。

根据Dynamic content 1和Dynamic content 2格雷颜色div自动调整其高度，因为我在该布局中定义了Height:auto。太好了。

我遇到的问题是如何为Div Div布局动态设置相同的高度（我用Orage颜色表示）。我尝试使用以下HTML和CSS但它无法在橙色div中自动获得高度...

以下是我试过的HTML和CSS。

<div style="margin: auto; width: 510px; height: auto;">

        <div style="display: inline-block; width: 20px; height: 100%; background-color: Orange; vertical-align: top;">
        </div>

        <div style="display: inline-block; width: 450px; height: auto; vertical-align: top; margin-left: -4px; margin-right: -4px; background-color: #bebebe;">
            <div style="margin: auto; width: 200px; height:50px; background-color:Green; text-align:center"> Dynamic content 1 </div>
            <div style="margin: auto; width: 200px; height:50px; background-color:Olive; text-align:center"> Dynamic content 2 </div>
        </div>

        <div style="display: inline-block; width: 30px; height: 100%; background-color: Orange; vertical-align: top;">
        </div>

</div>

以下是我获得上述HTML的结果。

它不会自动为side div分配height属性。即使是右手边的div。

不确定我做错了什么，如果可以指导我在这种情况下出错我会感激不尽。感谢....

注意

侧面的orage colred divs不是边界。

Answer 1

1）将display:table添加到容器div中。和

2）给你的'橙色'div display:table-cell

（Chrome不需要第2步，但其他浏览器如FF和IE都可以。）

<强> FIDDLE

Answer 2

尝试：

<div style="text-align:center; margin: auto; width: 510px; height: auto; background-color: Orange; vertical-align: top;">
<div style="display: inline-block; width: 450px; height: auto; vertical-align: top; margin-left: -4px; margin-right: -4px; background-color: #bebebe;">
<div style="margin: auto; width: 200px; height:50px; background-color:Green; text-align:center"> Dynamic content 1 </div>
<div style="margin: auto; width: 200px; height:50px; background-color:Olive; text-align:center"> Dynamic content 2 </div>
</div></div>

http://jsfiddle.net/dgjas/3/