html - 2 元素填充剩余高度

Question

中间有一个 div，里面有内容。

我希望顶部和底部的 div 填充剩余空间。

类似于 this

<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

如果可能的话，我想为顶部和底部容器设置一个最小高度。

Answer 1

使用 flexbox 你可以做到这一点

html, body {
  margin: 0;
}
body {
  display: flex;            /*  IE fix  */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;              /*  IE fix  */
}
.top, .bottom {
  flex: 1;                  /*  fill remaining space  */
  background: lightblue;
}
.middle {
  background: lightgreen;
}

<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>

---

如果你需要，你也可以在top/bottom元素中添加一个min-height

html, body {
  margin: 0;
}
body {
  display: flex;            /*  IE fix  */
}
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;              /*  IE fix  */
}
.top, .bottom {
  flex: 1;                  /*  fill remaining space  */
  background: lightblue;
  min-height: 200px;        /*  set a min-height  */
}
.middle {
  background: lightgreen;
}

<div class="container">
    <div class="top">

    </div>
    <div class="middle">
        Content
    </div>
    <div class="bottom">

    </div>
</div>