堆叠3 div，同时自动调整底部div高度

Question

我有3个div。

<div class="top"> TOP </div>
<div class="middle"> MIDDLE </div>
<div class="bottom"> BOTTOM </div>

.top{
 position: fixed;
 top:0;
 width: 100%;
}
.bottom{
 position: fixed;
 bottom:0;
 width: 100%;
}

middle div包含动态数据。所以我在那里启用了滚动条。

.middle{
  overflow-y: auto;
  width: 100%;
}

我的问题是，如何根据middle和bottom div中的数据自动堆叠top div并让middle自动调整其高度？

修改

Answer 1

flex模型可以帮助您：

＆＃13;

＆＃13;

html, body {
  height:100%;
  margin:auto;
  }
body {
  display:flex;
  flex-flow:column;
  background:turquoise;
}
.middle {
  flex:1;
  overflow:auto;
  background:tomato;
  }

＆＃13;

<div class="top"> TOP any height</div>
<div class="middle"> MIDDLE i scroll if too tall </div>
<div class="bottom"> BOTTOM any height</div>

＆＃13;

＆＃13;

＆＃13;

demo http://jsfiddle.net/7yLFL/445/

Answer 2

Flex模型，对任何截面高度没有限制：

html,
body {
	height: 100%;
}
body {
	font-family: sans-serif;
	font-size: 22px;
	line-height: 1.5em;
	text-align: center;
	color: #fff;
}
* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
.wrapper {
	height: 100%;
	display: flex;
	flex-direction: column;
	width: 50%;
	border: 1px solid #fff;
	float: left;
}
.top {
	background: none #59B2FF;
}
.middle {
	flex-grow: 100;
	overflow-y: auto;
	background: none #FFB800;
}
.bottom {
	align-self: flex-end;
	width: 100%;
	background: none #A1FFB5;
	color: #fff;
}

<div class="wrapper wrapper1">
	<div class="top">top</div>
	<div class="middle">middle</div>
	<div class="bottom">bottom</div>
</div>
<div class="wrapper wrapper2">
	<div class="top">top</div>
	<div class="middle">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.?</div>
	<div class="bottom">bottom</div>
</div>

同样在 Fiddle playground 。

Answer 3

我会创建一个'13.04.2015' div，它基本上是.outer的容器。您还可以创建一个名为.top, .middle, .bottom的css类，它具有绝对位置：

.inner

然后在你的HTML中：

#CSS
.outer {
  #Can position however you want
}
.inner {
  position: relative;
}
.top {
  top: 0;
  width: 100%;
}
.middle {
  overflow-y: auto;
  max-height: 100px;  //Optional; if you want to specify the maximum height this div can take
  width: 100%;
}
.bottom {
   width: 100%;
   bottom: 0
}

这是一个羽毛DEMO

Answer 4

刚刚提出：

   .middle{
        position: relative;
        height: auto;
    }

因为，您已将位置固定为顶部容器，因此它不会移出屏幕并将卡在顶部，而其他两个div将在顶部div下滚动。