【问题标题】：Flexible Div height between fixed Divs固定 Div 之间的灵活 Div 高度
【发布时间】：2014-09-18 09:24:19
【问题描述】：

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

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

【问题讨论】：

jsfiddle.net/eucvhskn 尽量避免固定 div。只是意见问题

【解决方案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>

【讨论】：

非常感谢！这几乎让我到了那里。唯一的问题是：如果它的大小扩大，我希望 midcontainer-content 仅在此容器内滚动。目前，一切（除了固定底部）滚动。你有想法吗？谢谢。
mh.. 基本上这是我想要避免的——定义中间容器 div 的高度。不过还是谢谢你。

【解决方案2】：

一般

固定页眉和页脚的位置并为内栏添加顶部和底部边距与您模拟的内容接近。

等高

对于假等高，包裹内列并应用背景颜色。

选项

您可以考虑使用表格 css 和类。还有javascript解决方案。

点击下方运行代码sn-p预览

* {
  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>

【讨论】：

谢谢你的帮助，理查德。问题是：在您的演示中，整个页面都有一个滚动条。理想情况下，我只想在 column1-div 上有一个。这可能吗？
仅在第一列上独立于第二列还是在两者之间共享？
只有第一列。第二列不应该滚动。谢谢谢谢谢谢（：
如果添加溢出：隐藏；对于 Maddy 的回答的 body 类，它将停止其他滚动。看起来你有足够的工作可以在这里工作。

【解决方案3】：

我建议这样做：

<!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>

如果您运行此代码 sn-p 也单击“整页”。

【讨论】：