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的显示保留为默认值＆＃39;阻止＆＃39;。

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

内部高度100％，上面有元素

1 个答案: