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