我有点像新手，有一个问题，我认为这个问题很简单。 我想构建一个或多或少灵活的布局，在顶部和底部都有固定的div，但两者之间有一个灵活的div。我做了一个草图，因为我无法解释它比这更好。
如果有人能给我一个开始，那将是亲切的。 谢谢答案 0 :(得分：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>
答案 1 :(得分：0)
修复页眉和页脚的位置，并在内栏中添加顶部和底部边距，这与您模拟的内容非常接近。
对于虚假等高，包裹内柱并应用背景颜色。
您可以查看使用表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>
答案 2 :(得分：0)
我建议：
<!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>
如果您运行此代码段，请点击＆＃34;完整页面＆＃34;。