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

我认为这应该很简单，但我正在努力，并将感谢任何帮助

我有一个HTML页面，垂直分为3个部分。顶部和底部是固定高度（比如说100px），中间部分包含一个大图像（比如说>800 x 800px尺寸）

大概是这样的：

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

第2节+图像应随浏览器窗口展开，以便没有滚动条

我尝试了很多方法，包括使用

height: calc(100% - 200px)

但这对我也不起作用。 JS小提琴：

解决这个问题的正确方法是什么

---

谢谢。

您可以使用Flexbox，因此如果您将

flex:1

设置为

middle

div，它将占用剩余的窗口高度

body，html{
保证金：0；
填充：0；
框大小：边框框；
}
.内容{
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
页眉、页脚{
高度：50px；
背景：浅蓝色；
}
.中{
弹性：1；
边框：2件纯黑；
}

标题
你的内容
页脚

尝试使用

vh

而不是使用百分比

height: calc(100vh - 220px);

（额外的

20px

间距）

---

感谢@Nenad Vracar的快速响应！这看起来很棒-但是，当内容（在本例中为“我的图像”）较大时，它会拉伸中间框，并最终具有滚动条。我尝试过很多东西，但高度似乎推动了弹性盒的界限。有什么想法吗？JS Fiddle：您可以在这样的图像上使用

calc

，也可以将图像设置为背景谢谢。我真傻，竟然错过了这个：）