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

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

白金牧场

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

阅读量1.5w

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Web-Dev相关 WEB三把刀使用介绍文章标签： web前端布局 absolute 滚动条

本文链接：https://blog.youkuaiyun.com/qq_34409701/article/details/52207380

本文介绍了后台管理页面的简单布局，包括上层标签、左侧菜单和中部内容显示块。重点讲解如何通过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;