为什么不能正确计算带有 display:table 的 div 包含带有 display:caption 的 div 的 CSS 高度属性？

Question

我无法弄清楚为什么当 display:table-row 应用于 #header div 时 #container div 的高度正确计算为 200 像素，而当 display:table-caption 应用于#header div。

我已经在 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

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