css - 为什么对于具有display:table的div包含display:caption的div的div无法正确计算CSS height属性？

我无法弄清楚为什么将display：table-row应用于#header div时，正确计算#container div的高度为200px，而将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>

最佳答案

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