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

最新推荐文章于 2024-02-19 10:34:01 发布

VIP文章白金牧场

最新推荐文章于 2024-02-19 10:34:01 发布

阅读量1.5w

点赞数 3

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

本文链接：https://blog.csdn.net/qq_34409701/article/details/52207380

版权

作为一个后台管理页面，不必太过复杂，一般只需要三部分：
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:48

最低0.47元/天解锁文章

优惠劵

白金牧场

关注关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
WEB前端-HTML-CSS-后台管理页面布局小例

作为一个后台管理页面，不必太过复杂，一般只需要三部分： 1、上层标签块； 2、左侧菜单块； 3、中部内容显示块；今天简要给大家分享一个布局中的一个小case；需求：要求上层标签块、左侧菜单快固定不动，滚动条只对中部显示块作用；其实很简单，就是利用absolute的底部定位 ”bottom：0“配合overflow：auto来实现的。代码如下：<!DOCTYPE html><html
复制链接

扫一扫