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