html - Div 100% 高度减去固定大小

Question

我需要创建以下结构：

[        30px height        ]
[ full height (100% - 30px) ]

是否可以仅使用 HTML5 + CSS3（跨浏览器）来实现这一点？此 DIV 不得重叠。

Answer 1

calc()在 CSS 中使用

更新的演示

html, body {
    height: 100%;
}

div.black {
    background: #000;
    height: calc(100% - 30px);
}

.red {
    height: 30px; 
    background: #f00;
}

演示（错过了30px div顶部）

Answer 2

您可以通过绝对定位来实现这一点，而无需使用实验性且未被广泛支持 calc的功能，以下适用于自 1999 年以来的每个浏览器：

HTML

<div id="root">
    <div id="top"></div>
    <div id="rest"></div>
</div>

CSS

#root {
    height:300px;
    width:300px;
    background:blue;
    position:relative;
}
#top {
    height:24px;
    position:absolute;
    background:green;
    border:3px solid maroon;
    width:100%;
}
#rest {
    border:3px solid yellow;
    position:absolute;
    width:100%;
    top:30px;
    bottom:0;    
    background:red;
}

JSfiddle sample