内部高度100％，元素上方

Question

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

这是我的小提琴

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%
}