html - 内部高度 100%，上面有元素

Question

我有两个 div，我想降低 div 以占据页面的其余部分，但是当我将底部 div 中的东西加高时，它们会超出屏幕。

这是我的 Fiddle

HTML:

<div id="full">
    <div id="header">This is the header content.</div>
    <div id="someid">
        <div id="someid2">
            Hello content    
        </div>

    </div>
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#full {
    background-color: red;
    height: 100%;
    width: 100%;
    display: table;
}
#header,
#someid{
    display: table-row;
}
#header{
    background-color: blue;
    width: 100%;
}
#someid{
    background-color: green;
}
#someid2{
    background-color:red;
    height: 100%
}

我希望页眉部分的大小只达到它需要的高度，而不是看起来的 50%。我应该在这里使用显示表格行吗？

Answer 1

将#header div 的显示保留为其默认值“ block ”。

JSFiddle:http://jsfiddle.net/LTQkG/3/

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#full {
    background-color: red;
    height: 100%;
    width: 100%;
    display: table;
}
/* REMOVED #header selector here. */
#someid{
    display: table-row;
}
#header{
    background-color: blue;
    width: 100%;
}
#someid{
    background-color: green;
    height: auto;
}
#someid2{
    background-color:red;
    height: 100%
}