html - CSS位置，以便始终调整中间层的大小以垂直填充页面上可用的空白，以便没有滚动条？

我想这应该很简单，但我正在努力，希望得到任何帮助。
我有一个HTML页面，垂直分为3个部分。顶部和底部是固定高度（比如100像素），中间部分包含一个大图像（比如>800 x 800像素的尺寸）。
像这样的：

+--------------------------+
| Section 1 - 100px height |
+--------------------------+
|                          |
|                          |
|   Section 2 - Image      |
|                          |
|                          |
+--------------------------+
| Section 3 - 100px height |
+--------------------------+

第二个部分+图像应该随着浏览器窗口展开，这样就没有滚动条了。
我试过很多方法，包括使用

height: calc(100% - 200px)

但这对我也没用。
JS小提琴：https://jsfiddle.net/jygpqfaa/3/
解决这个问题的正确方法是什么？
谢谢。

最佳答案

您可以使用Flexbox，所以如果您将flex: 1设置为middlediv，它将占用窗口高度的其余部分。

body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

header, footer {
  height: 50px;
  background: lightblue;
}

.middle {
  flex: 1;
  border: 2px solid black;
}

<div class="content">
  <header>Header</header>
  <div class="middle">Your Content</div>
  <footer>Footer</footer>
</div>

关于html - CSS位置，以便始终调整中间层的大小以垂直填充页面上可用的空白，以便没有滚动条？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35465060/