使用纯CSS实现固定头部、动态底部与可滚动叠加层-js教程-PHP中文网

使用纯CSS实现固定头部、动态底部与可滚动叠加层

聖光之護

发布： 2025-11-01 18:59:01

原创

921人浏览过

使用纯css实现固定头部、动态底部与可滚动叠加层

本文详细介绍了如何利用CSS实现一个复杂的布局需求：在固定头部和动态高度的底部之间，创建一个可滚动且不溢出的叠加层。通过巧妙运用Flexbox布局、绝对定位以及CSS `calc()` 函数结合视口单位（`vh`）和百分比单位，解决了叠加层动态定位和高度计算的挑战，确保其始终位于指定区域内并支持内容滚动，无需依赖JavaScript进行尺寸计算。

在现代Web开发中，构建具有固定头部、固定或动态底部以及中间可滚动内容区域的布局是常见的需求。当需要在这样的布局中引入一个动态高度的叠加层（Overlay）时，挑战随之而来，尤其是在要求叠加层不覆盖头部和底部，且自身内容可滚动，同时底部高度不固定的情况下。本文将提供一个纯CSS的解决方案，精确控制叠加层的定位和尺寸。

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

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>

登录后复制

以上就是使用纯CSS实现固定头部、动态底部与可滚动叠加层的详细内容，更多请关注php中文网其它相关文章！