划分100％高度减去固定尺寸

Question

我需要创建以下结构：

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

是否可以通过HTML5 + CSS3（跨浏览器）实现这一目标？这个DIV不能重叠。

Answer 1

在CSS中使用calc()

Updated Demo

html, body {
    height: 100%;
}

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

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

Demo（错过了30px div在上面）

Answer 2

您可以通过绝对定位实现此目的，而无需使用实验和not widely supported 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