WEB前端-HTML-CSS-后台管理页面布局小例

最新推荐文章于 2025-06-23 14:46:33 发布

原创

最新推荐文章于 2025-06-23 14:46:33 发布 · 1.5w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#web前端 #布局 #absolute #滚动条

本文介绍了后台管理页面的简单布局，包括上层标签、左侧菜单和中部内容显示块。重点讲解如何通过CSS的absolute定位和overflow属性，实现头部和侧边栏固定不动，中部内容区域滚动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作为一个后台管理页面，不必太过复杂，一般只需要三部分：
1、上层标签块；
2、左侧菜单块；
3、中部内容显示块；

今天简要给大家分享一个布局中的一个小case；
需求：要求上层标签块、左侧菜单快固定不动，滚动条只对中部显示块作用；

其实很简单，就是利用absolute的底部定位 ”bottom：0“配合overflow：auto来实现的。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0 auto;
            background-color:greenyellow;
        }
        .pa-header{
            height:48px;
            background-color:blue;

        }
        .pa_body .body-menu{
            position:absolute;
            top:48px;