Div 100％高度减去固定大小 [英] Div 100% height minus fixed size

问题描述

我需要创建以下结构：

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

是否可以仅使用HTML5 + CSS3（跨浏览器）实现？

Is it possible to achieve this solely with HTML5 + CSS3 (cross-browser)? This DIVs must not overlap.

推荐答案

您可以通过绝对定位实现这一目的，而无需使用实验和未广泛支持 calc 功能，以下工作在每个浏览器自1999年以来：

You can achieve this with absolute positioning without using the experimental and not widely supported calc feature, the following works in every browser since 1999:

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

CSS

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示例

这篇关于Div 100％高度减去固定大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！