我有点新手，有一个问题我想很简单。我想构建一个或多或少灵活的布局，顶部和底部有固定的div，但中间有一个灵活的div。我画了一个草图，因为我再也解释不清楚了。
如果有人能给我一个机会，我将不胜感激。感谢
图片：分区排列
您可以尝试一下，演示
.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>
概述
固定页眉和页脚的位置，并为内部列添加上下边距，这与您所模拟的非常接近。
等高
对于人造等高，包裹内柱并应用背景色。
选项
您可以考虑使用表css和类。还有javascript解决方案。
单击下面的运行代码段进行预览
* {
margin: 0px;
padding: 0px;
}
.header, .subhead {
background-color: #f2d5da;
height: 50px;
position: fixed;
width: 100%;
}
.subhead {
background-color: #c3e3ac;
top: 50px;
}
.container {
background-color: #ff535e;
min-height: 100vh;
}
.column1, .column2 {
width: 50%;
float: left;
margin-top: 100px;
margin-bottom: 50px;
}
.footer {
background-color: #f2d5da;
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}<div class="header">
A
</div>
<div class="subhead">
B
</div>
<div class="container">
<div class="column1">
C1
<p>Umami synth Neutra, cardigan seitan squid slow-carb wolf mumblecore Godard paleo bespoke brunch pop-up. Asymmetrical skateboard banjo beard brunch. Drinking vinegar shabby chic next level American Apparel raw denim Truffaut Godard occupy. Wolf PBR&B VHS, Kickstarter selfies pug Brooklyn mlkshk lomo seitan distillery chambray Tonx. Vegan keffiyeh slow-carb cornhole. Etsy artisan drinking vinegar Brooklyn roof party. 3 wolf moon butcher single-origin coffee church-key Pinterest typewriter Wes Anderson.</p>
</div>
<div class="column2">
C2
<p>Umami synth Neutra, cardigan seitan squid slow-carb wolf mumblecore Godard paleo bespoke brunch pop-up. Asymmetrical skateboard banjo beard brunch. Drinking vinegar shabby chic next level American Apparel raw denim Truffaut Godard occupy. Wolf PBR&B VHS, Kickstarter selfies pug Brooklyn mlkshk lomo seitan distillery chambray Tonx. Vegan keffiyeh slow-carb cornhole. Etsy artisan drinking vinegar Brooklyn roof party. 3 wolf moon butcher single-origin coffee church-key Pinterest typewriter Wes Anderson.</p>
<p>Umami synth Neutra, cardigan seitan squid slow-carb wolf mumblecore Godard paleo bespoke brunch pop-up. Asymmetrical skateboard banjo beard brunch. Drinking vinegar shabby chic next level American Apparel raw denim Truffaut Godard occupy. Wolf PBR&B VHS, Kickstarter selfies pug Brooklyn mlkshk lomo seitan distillery chambray Tonx. Vegan keffiyeh slow-carb cornhole. Etsy artisan drinking vinegar Brooklyn roof party. 3 wolf moon butcher single-origin coffee church-key Pinterest typewriter Wes Anderson.</p>
</div>
<div class="clearfix"></div>
</div>
<div class="footer">
D
</div>我建议这样做：
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<body>
<div id="A" style="
height: 100px;
top:0px;
left:0px;
right:0px;
background: lavenderblush;
position: absolute;
"><p>DIV A</p></div>
<div id="B" style="
height: 50px;
background: lightgreen;
top:100px;
left:0px;
right:0px;
position: absolute;
"><p>DIV B</p></div>
<div id="C1" style="
top:150px;
left:0px;
bottom:50px;
width: 50%;
background: lightcoral;
position: absolute;
">
<div id="content_c1" style="
overflow:auto;
width: 100%;
height: 100%;
background: lightyellow;
opacity: .5;
border-width: 1px;
border-style: solid;
">
<p>DIV C1</p>
<p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p>
</div>
</div>
<div id="C2" style="
top:150px;
right:0px;
bottom:50px;
width: 50%;
background: lightcoral;
position: absolute;
">
<div id="content_c1" style="
overflow:auto;
width: 100%;
height: 100%;
background: lightyellow;
opacity: .5;
border-width: 1px;
border-style: solid;
">
<p>DIV C2</p>
<p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p><p>I'm somewhat of a novice and have a question which I suppose is rather simple.
I'd like to build a more or less flexible layout having fixed divs on top and bottom but a flexible div in between. I've made a sketch as I can't explain it any better than that way.</p><p>Would be gracious if anyone could give me a start.
Thanks </p>
</div>
</div>
<div id="D" style="
height: 50px;
background: lavenderblush;
bottom:0px;
left:0px;
right:0px;
width: 100%;
position:absolute;
"><p>DIV D</p></div>
</body>
</html>如果您运行此代码片段，还可以单击"完整页面"。