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

我有三个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并使

bottom

根据

top

和

middle

div中的数据自动调整其高度

编辑

只要把：

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

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

只需放置：

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

---

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

我将创建一个

.outer

div，它基本上是

.top、.middle、.bottom

的容器。您还可以创建一个名为

.internal

的css类，该类具有绝对位置：

#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
}

然后在HTML中：

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

顶部
中间的
底部

---

这是一个plunker

我将创建一个

.outer

div，它基本上是

.top、.middle、.bottom

的容器。您还可以创建一个名为

.internal

的css类，该类具有绝对位置：

#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
}

然后在HTML中：

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

顶部
中间的
底部

---

这是一个plunker

flex型号可以帮助您：

html，正文{
身高：100%；
保证金：自动；
}
身体{
显示器：flex；
柔性流动：柱；
背景：绿松石；
}
.中{
弹性：1；
溢出：自动；
背景：番茄；
}

TOP任意高度
中间我滚动如果太高
底部任意高度

flex型号可帮助您：

html，正文{
身高：100%；
保证金：自动；
}
身体{
显示器：flex；
柔性流动：柱；
背景：绿松石；
}
.中{
弹性：1；
溢出：自动；
背景：番茄；
}

TOP任意高度
中间我滚动如果太高
底部任意高度

弹性模型，任何截面高度均不受限制：

html，
身体{
身高：100%；
}
身体{
字体系列：无衬线；
字体大小：22px；
线高：1.5em；
文本对齐：居中；
颜色：#fff；
}
* {
框大小：边框框；
填充：0；
保证金：0；
}
.包装纸{
身高：100%；
显示器：flex；
弯曲方向：立柱；
宽度：50%；
边框：1px实心#fff；
浮动：左；
}
.顶{
背景：无#59B2FF；
}
.中{
弹性增长：100；
溢出y：自动；
背景：无#FFB800；
}
.底部{
自对准：柔性端；
宽度：100%；
背景：无#A1FFB5；
颜色：#fff；
}

顶部
中间的
底部
顶部
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。？
底部

Flex型号，不限制任何截面高度：

html，
身体{
身高：100%；
}
身体{
字体系列：无衬线；
字体大小：22px；
线高：1.5em；
文本对齐：居中；
颜色：#fff；
}
* {
框大小：边框框；
填充：0；
保证金：0；
}
.包装纸{
身高：100%；
显示器：flex；
弯曲方向：立柱；
宽度：50%；
边框：1px实心#fff；
浮动：左；
}
.顶{
背景：无#59B2FF；
}
.中{
弹性增长：100；
溢出y：自动；
背景：无#FFB800；
}
.底部{
自对准：柔性端；
宽度：100%；
背景：无#A1FFB5；
颜色：#fff；
}

顶部
中间的
底部
顶部
对于所有的错误，我们都要清楚地认识到这一点，因为我们必须清楚地认识到，所有人都应该受到赞扬、尊重和尊重，因为他们都是发明家和准建筑师。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。？
底部

您想要什么还不清楚。那3个部门是身体部位吗？他们都身高不详吗？底部应该是粘性的页脚吗？你能给我们每个街区的最新款式吗？你能更新这个吗？div有id，但是在css代码中你指定了类？它解决了你的问题吗？@skobaljic谢谢。3个div应适合屏幕高度<代码>顶部，

中部

div高度基于其内容。所有3个div都应该保持他们的位置。看起来是演示的副本，但仍然不清楚你想要什么。那3个部门是身体部位吗？他们都身高不详吗？底部应该是粘性的页脚吗？你能给我们每个街区的最新款式吗？你能更新这个吗？div有id，但是在css代码中你指定了类？它解决了你的问题吗？@skobaljic谢谢。3个div应适合屏幕高度<代码>顶部，

中部

div高度基于其内容。所有3个div都应该保持在它们的位置上。看起来像是演示的副本。你想让底部作为页脚固定吗？如果是这样的话，那么你也可以将底部div作为固定位置。谢谢。

middle

的内容不会在

top

和

bottom

下运行吗？是的，在这种情况下会运行。您希望将底部作为页脚固定吗？如果是这样的话，那么你也可以将底部div作为固定位置。谢谢。

middle

的内容不会在

top

和

bottom

下运行吗？是的，在这种情况下会运行。您需要将溢出更改为溢出-y:auto。此外，您应该使用最大高度