知识点:

绝对定位+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. Nand Flash与Nor

    转:http://www.360doc.com/content/11/1215/15/1299815_172458274.shtml Flash经常在一些地方被提到,一直没认真去理解它们的区别,因此, ...

  2. arcgis andriod 点击后变色

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

  3. 基于Nginx的开墙方案

    Kubernetes集群内部通过服务名能进行相互调用,但如果Kubernetes中的pod需要调用外部服务,而且这些外部服务是属于不同的安全区域,就面临开墙的问题,因为Kubernetes Pod能够 ...

  4. 如何正确理解关键字"with"与上下文管理器(转载)

    如果你有阅读源码的习惯,可能会看到一些优秀的代码经常出现带有 “with” 关键字的语句,它通常用在什么场景呢?今天就来说说 with 和 上下文管理器. 对于系统资源如文件.数据库连接.socket ...

  5. IOS APP 上传到AppStore

    由于第一次接触要把 app 上传到 AppStore 比较棘手,很多地方不懂,研究了 大半天 终于给上传成功了,现在坐等审核吧,首先把上传到AppStore的流程 整理下 : 第一 :准备证书 (要确 ...

  6. Mybatis使用Redis二级缓存

    在Mybatis中允许开发者自定义自己的缓存,本文将使用Redis作为Mybatis的二级缓存.在Mybatis中定义二级缓存,需要如下配置: 1. MyBatis支持二级缓存的总开关:全局配置变量参 ...

  7. P2P终结者和反P2P终结者如何使用

    1 安装软件并运行,首先扫描网络,第一台控制机就是自己,你可以查看IP,和命令提示符下的IP吻合. 2 点击高级选项,指定本机网络环境和网卡 3 控制规则设置,首先设置全局限速模板,其他的差不多. 4 ...

  8. java提高篇-----理解java的三大特性之封装

    在<Think in java>中有这样一句话:复用代码是Java众多引人注目的功能之一.但要想成为极具革命性的语言,仅仅能够复制代码并对加以改变是不够的,它还必须能够做更多的事情.在这句 ...

  9. MongoDB之Map-Reduce -- Mongo Shell版和C#版（上）

    最近有在学习MongoDB,看到了关于Map-Reduce,觉得蛮有意思的,所以在这里就记录下来作为学习笔记. 关于Map-Reduce的作用这里就引用一下官网以及另外一篇文章看到的,言简意赅. 1. ...

  10. UITextField,UITextView字数限制

    UITextField,UITextView字数限制 主要是使用他们的两个代理方法 //标题限制在 30个字以内 - (BOOL)textField:(UITextField *)textField ...