Html CSS中的扩展中间层

我将如何着手设计一个有固定高度的页眉和页脚（附在浏览器窗口的顶部和底部）但中间有一个扩展的网站。滚动条只用于中间（图中的橙色部分），这样页面的其余部分就不需要滚动了。我在下面画了一个模型来更清楚地解释

理想情况下，它需要完全用CSS和HTML实现（不要使用javascript）。这个问题我已经解决了很多，但我不能强迫橙色部分在未满时填满剩余的空间（无论内容是什么），并在溢出时开始滚动

---

它被称为StickyFooter或“页脚推送”方法。网络上到处都是，但这是我找到的最好的选择：

我想这就是你想要的：

（）

HTML:

<div id="header">Patrick</div>
<div id="content">..</div>
<div id="footer">Beardmore</div>

html, body {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden
}
#header, #content, #footer {
    position: absolute;
    left: 0;
    width: 100%
}
#header {
    top: 0;
    height: 100px;

    background: #ccc
}
#content {
    top: 100px;
    bottom: 100px;
    overflow-y: auto
}
#footer {
    bottom: 0;
    height: 100px;

    background: #ccc
}

这是一个古老的问题，但为我们提供了一种实现此模式的超级简单的方法，一种熟悉的“圣杯”布局：

正文{
/*将容器设置为垂直（柱）伸缩模式，确保主体为全高*/
显示器：flex；
最小高度：100vh；
弯曲方向：立柱；
}
页眉、页脚{
/*大致相当于最小高度：50px*/
弹性基准：50px
}
标题{
背景色：#7AEE2D；
}
主要{
背景色：#EBAE30；
/*告诉main部分展开以填充可用空间，这与flex 1；或flex:1 auto*/
柔性生长：1；
}
页脚{
背景色：#34A4E7；
}

标题
主要的
页脚

我不确定粘贴的页脚是否是您想要的，这就是为什么我将其作为注释和问号发布的原因。关于您的问题，我不明白的是，“最小高度”和“最大高度”图像似乎与您的文本“固定高度页眉和页脚（附在浏览器窗口的顶部和底部）不一致，而是一个扩展的中间部分”。图像中的外部红色边框不是视口，而是整个页面吗？对不起。红色边框表示整个视口（忽略宽度）。页脚和页眉保持相同的高度。只有橙色的部分会改变高度（因此它有自己的滚动条），因为它可以有任何数量的内容。我在你最后的评论之前就开始写我的答案了。现在我得到了正确的答案，我很受鼓舞，希望如此！完全正确非常感谢你的帮助。这不是我想要的。粘性页脚的问题是整个浏览器屏幕滚动。我希望能够使单独的隔间滚动他们自己的滚动条（如橙色隔间）。这看起来似乎没有什么不同，但对我的想法来说很重要。当然可以理解。然而，我要提醒你们的是，一次又一次的可用性测试证实了网站中滚动的div（或方框）会让用户感到沮丧。它们很难导航，内容可能会丢失，并且在可访问性方面完全失败。我正在撤消我继承的站点上的一个集。信不信由你，一个更好的解决方案可能是使用网格（比如数据包）来考虑“分页”内容，或者甚至为各自的平台提供服务器端分页脚本。这里有一些证据：仅供参考，当你在Android浏览器上运行此功能时，你无法滚动内容。有人能在IPhone/Ipad上测试吗？不幸的是，我没有Android设备来测试这个。不过，如果它不支持

overflow-y:auto

，那就有点奇怪了。回答得好。如果我可以为大型文本提个建议的话：使用Lorem Ipsum：这对我的眼睛伤害更小：-）