
本文详细介绍了如何利用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>


