html - 固定 Div 之间的灵活 Div 高度

Question

我是新手，有一个我认为很简单的问题。 我想构建一个或多或少灵活的布局，在顶部和底部有固定的 div，但在两者之间有一个灵活的 div。我画了一个草图，因为我无法用这种方式更好地解释它。

如果有人能给我一个开始，我将不胜感激。 谢谢

Image: Div arrangement

Answer 1

你可以试试这个， <强> DEMO

.clr{clear: both;}
div{text-align: center;}
.divA{background-color: #f0d5da;height: 87px;}
.divB{background-color: #c6e3a8;height: 50px;}
.divC1{background-color: #f33e47;min-height: 200px;width: 50%;float: left;}
.midcontainer{padding-bottom: 40px;}
.divC2{background-color: #fc575f;min-height: 200px;width: 50%;float: right;}
.divD{background-color: #f0d5da;height: 40px;position: fixed;bottom:0;width: 100%;}

html:-

<div class="divA">
    DIV A
</div>
<div class="divB">
    DIV B
</div>
<div class="midcontainer">
    <div class="divC1">DIV C1</div>
    <div class="divC2">DIV C2</div>
    <div class="clr"></div>
</div>
<div class="divD">DIV D</div>