CSS：如何填充包含固定大小元素的动态容器？

Question

使用 CSS 我试图让div填充一个动态大小的容器，该容器也包含一个固定的高度div。

grey div （请参阅代码段）如何才能填充剩余的可用空间而不会溢出？

• grey div .Fill里面没有任何内容。
• 我更喜欢将CSS Flex仅用作最后的手段。

---

FIDDLE

html,body{height:100%;}
.Wrap{
    height:100%;
    width:50%;
}
.H40,.H60{
    display:block;
    padding:15px;
    box-sizing:border-box;
}
.H40{        
    height:40%;
    background:#b00;
}
.H60{
    height:60%;
    background:#58c;
}
.Top{
    background:#8d5;
    height:40px;
}
.Fill{
    height:100%;
    width:100%;
    background:#DDD;
}

<div class="Wrap">
    <div class="H40">
        <div class="Top">TOP</div>
        <div class="Fill">Fill this space</div>
    </div>
    <div class="H60">
        <div class="Top">TOP</div>
        <div class="Fill">Fill this space</div>
    </div>
</div>

Answer 1

试试这个

使用calc

.Fill{
    height:calc(100% - 40px);
    width:100%;
    background:#DDD;
}

http://jsfiddle.net/pgys24ct/3/

Answer 2

我认为display:table，display:table-row和display:table-cell会解决此问题。

JSfiddle Demo

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body{height:100%;}
.Wrap{
    height:100%;
    width:50%;
}
.H40,.H60{
    display: table;
    padding:15px;
    height:100%;
    width:100%;

}
.H40{ 
    height:40%;
    background:#b00;
}
.H60{
    height:60%;
    background:#58c;
}
.Top{
    display: table-row;
    background:#8d5;
    height:40px;
}

.fill {
    display: table-cell;
    background: #ccc;
    height:100%;
}

<div class="Wrap">
    <div class="H40">
        <div class="Top">TOP</div>
        <div class="fill"></div>
    </div>
    <div class="H60">
        <div class="Top">TOP</div>
        <div class="fill"></div>
    </div>
</div>

Answer 3

在CSS中添加height:calc(100% - 20px);。