知识点:

绝对定位+overflowhidden

整体思路

三大块

pg-header---需要固定 (height:48px)

pg-content

menu 右侧菜单-需要固定(width:200px; top:48;left:0; bottom:0;)

content---当内容较多时候需要有滚动条(top:48;left:200px;right:0; bottom:0; overflow: auto;)

pg-footer

关键技术:

position绝对定位

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>后台管理</title>

    <style>

        .fl {

            float: left;

        }

        .fr {

            float: right;

        }

        body {

            margin: 0;

        }

        .pg-header {

            margin: 0 auto;

            height: 48px;

            background-color: black;

        }

        .pg-content .menu {

            width: 200px;

            position: fixed;

            top: 48px;

            left: 0;

            bottom: 0;

            background-color: bisque;

        }

        .pg-content .content {

            position:
fixed
; top: 48px; left: 200px; right: 0; bottom: 0; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="menu fl">a</div> <div class="content fr"> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> <p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p><p>hi cristna</p> </div> </div> <div class="pg-footer"></div> </body> </html>

[css]后台管理系统布局的更多相关文章

  1. css后台页面布局技巧

    目标: 实现左边侧边栏固定,右边内容区自适应 侧边栏内容较少时背景100%高度展示 侧边栏内容较多时可以滚动,且不让显示滚动条(显示太丑) 内容区较少时不出现滚动条,较多时可以滚动 code: < ...

  2. DoNet开源项目-基于jQuery EasyUI的后台管理系统

    博主在业余时间开发了一个简单的后台管理系统,其中用到了 jQuery EasyUI 框架,上次分享过系统布局,参考文章:jQuery EasyUI 后台管理系统布局分享,目前已完成系统的整体框架的搭建 ...

  3. Vue + Element-ui实现后台管理系统(2)---项目搭建 + ⾸⻚布局实现

    项目搭建 + ⾸⻚布局实现 上篇对该项目做了个总述 :Vue + Element-ui实现后台管理系统(1) --- 总述 这篇主要讲解 项目搭建 + 后台⾸⻚布局实现 : 整体效果 后台首页按布局一 ...

  4. 【JQuery Easy UI】后台管理系统的简单布局分享

    重要说明:本博已迁移到 石佳劼的博客.有疑问请到 文章新地址 留言..! 近期做的一个简单的后台管理系统,当中用到了JQuery Easy UI框架,对于撸主这样的把控件能摆整齐就谢天谢地的码农来说, ...

  5. 构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统

    开篇:从50开始系统已经由MVC4+EF5+UNITY2.X+Quartz 2.0+easyui 1.3.4无缝接入 MVC5+EF6+Unity4.x+Quartz 2.3 +easyui 1.4. ...

  6. java springmvc+bui+bootstrap后台管理系统搭建

    先来说说bui,这个框架是阿里巴巴的一个前端团队研发的,能够用很少的代码快速搭建一个后台管理系统,很适做管理平台的开发, 之前用过类似这样的框架extjs,做个比较,这个框架实现功能比extjs的代码 ...

  7. vue-quasar-admin 一个包含通用权限控制的后台管理系统

    vue-quasar-admin   Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 它能帮助web开发者快速创建以下网站:响应式网站,渐进式应用,手机应用(通过Cor ...

  8. 使用react全家桶制作博客后台管理系统

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用react全家桶制作的博客后台管理系统 概述 该项目是基于react全家桶(React.React-r ...

  9. xadmin快速搭建后台管理系统

    一.xadmin的特点: 1.基于Bootstrap3:Xadmin使用Bootstrap3.0框架精心打造.基于Bootstrap3,Xadmin天生就支持在多种屏幕上无缝浏览,并完全支持Boots ...

随机推荐

  1. rocketmq,zookeeper,redis分别持久化的方式

    1.rocketmq持久化: RocketMQ 的所有消息都是持久化的, 先写入系统 PAGECACHE, 然后刷盘, 可以保证内存与磁盘都有一份数据,访问时,直接从内存读取. RocketMQ 的所 ...

  2. arcgis andriod 点击后变色

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools= ...

  3. 【JSP JSTL】<c:if>多个判断条件 + <c:foreach>满足条件跳出循环

    有一个需求,将所拥有的权限存放于session中,现在JSP页面判断这些如果在所有权限中有某一个或者某几个,就显示相对应的页面内容 举一个例子,实现以上的逻辑,<c:if>多个判断条件 + ...

  4. Android 卡顿优化 3 布局优化 工具 Hierarchy Viewer

    欲善其事, 先利其器. 分析布局, 就不得不用到Hierarchy Viewer了. 本文工具使用皆以GithubApp的详情界面RepoDetailActivity为例说明. 为了不影响阅读体验, ...

  5. [转载] Spring3.1 Cache注解

    需要感慨一下,spring3.0时丢弃了2.5时的spring-modules-cache.jar,致使无法使用spring来方便的管理cache注解,好在3.1.M1中增加了对cache注解的支持, ...

  6. jQuery中resetForm与clearForm的区别？

    reset是重置成最初状态,最初状态是可能有默认值的clear是清空form控件的值

  7. 一些关于VC++开发的笔记

    通常程序卡住了,主要有双方面的可能: (1)死循环了 (2)死锁了 要确定是否是死循环.能够通过调试器(经常使用Windbg)查看线程执行时间,假设隔了一段会儿两次查看的执行时间有非常大区别,那么非常 ...

  8. iOS：基于Socket的第三方框架CocoaAsyncSocket的使用

    CocoaAsyncSocket无疑是目前封装得最完善的Socket库了:支持异步TCP/UDP,支持GCD,Objective-C接口封装,同时还有日志跟踪功能,使用此日志跟踪,程序员可以很方便的进 ...

  9. OpenWRT DNS无法解析WAN连接的内网服务器域名

    系统版本OpenWrt Chaos Calmer 15.05.1,网络连接为:WAN口连接内网10.x.x.x网段,WAN口设置为静态IP.设置L2TP接口,通过L2TP访问外网.问题出现于,所有外网 ...

  10. mysql5.7用户密码策略问题

    密码策略问题 ERROR 1819 (HY000): Your password does not satisfy the current policy requirements 查看 mysql 初 ...