css - 为什么不能正确计算显示为 :table containing a div with display:caption? 的 div 的 CSS 高度属性

Question

我不明白为什么当 display:table-row 应用于 #header div 时 #container div 的高度计算正确为 200px，而当 display:table-caption 应用于时它太大了#header 分区。

我已经在 Chrome 35 中测试过了

有人知道为什么会这样和/或有简单的解决方法吗？(最好不使用 javascript 或添加额外的 div)？

我希望#header div 的高度与其内容一样小，宽度为#container div 的 100%，#container 正好适合#main div。

jsfiddle:http://jsfiddle.net/2SKY4/

CSS:

#main {
    width: 200px;
    height: 200px;
    background-color:#ff0; 
}
#container {
    background-color: #0f0;
    width: 90%;
    display:table;
    height:100%;
}
#header {
    background-color:#F0F;
    display:table-caption;
}
#splitpanel {
    display:table-row;
    background-color:#0ff;
}
#leftpanel {
    background-color: #f00;
    overflow: scroll;
    display: table-cell;
}
#rightpanel {
    background: #00f;
    overflow: scroll;
    display: table-cell;
}

HTML:

<div id="main">
    <div id="container">
        <div id="header">Header</div>
        <div id="splitpanel">
            <div id="leftpanel"></div>
            <div id="rightpanel"></div>
        </div>
    </div>
</div>

Answer 1

我不确定你想要什么。 fiddle 已经有了你想要的样子。您最好展示快照并说出您想要的内容。您正在使用不同类型的“显示”，这也没有多大意义。你能描述一下你想要的快照结构吗？