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

Question

使用CSS我想获得一个div来填充也包含固定高度div的动态大小的容器。

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

尝试为

.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

将height:calc(100% - 20px);加入。填入您的CSS。