本文详细介绍了如何利用CSS实现一个复杂的布局需求：在固定头部和动态高度的底部之间，创建一个可滚动且不溢出的叠加层。通过巧妙运用Flexbox布局、绝对定位以及CSS `calc()` 函数结合视口单位（`vh`）和百分比单位，解决了叠加层动态定位和高度计算的挑战，确保其始终位于指定区域内并支持内容滚动，无需依赖JavaScript进行尺寸计算。
在现代Web开发中，构建具有固定头部、固定或动态底部以及中间可滚动内容区域的布局是常见的需求。当需要在这样的布局中引入一个动态高度的叠加层（Overlay）时，挑战随之而来，尤其是在要求叠加层不覆盖头部和底部，且自身内容可滚动，同时底部高度不固定的情况下。本文将提供一个纯CSS的解决方案，精确控制叠加层的定位和尺寸。
1. 基础HTML结构
首先，我们需要一个清晰的HTML结构来承载头部、内容区、底部以及位于底部的叠加层。
Header
This is the main scrollable content area.
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content
line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
Long content line...
line...
