知识点:

绝对定位+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. dotnet若干说明图片

  2. asp.net mvc 3 配置全局错误处理 Web.config中设置CustomError

    摘自: http://www.myexception.cn/web/1130191.html asp.net mvc 配置全局异常处理 Web.config中设置CustomError Web.con ...

  3. DevExpress 中 DateEdit 控件 格式化显示和编辑的日期格式为: yyyy-MM-dd

    摘自: http://blog.sina.com.cn/s/blog_76b5256c0100zkwk.html 1需要显示的日期为2012年3月12日需要如下设置 Properties-Mask-E ...

  4. Java中文语言处理HanLP

    官网:http://hanlp.linrunsoft.com/ 1.中文分词:http://hanlp.linrunsoft.com/doc/_build/html/segment.html 2.摘要 ...

  5. 第八章：SCRT搭建ES搜索引擎步骤

    1.打开SecureCRT工具,输入服务器IP.端口号,确认后根据提示输入账号密码. 2.进入后判断服务器是否安装过JDK(1.6.0以上版本), 输入命令:#  java  –version 3.如 ...

  6. 【日志处理】logstash性能优化配置

    2W条数据用时4秒完成,每秒5000条左右,昨天是同时写入到文件和标准输出,看起来是output的问题,这块性能应当可以满足性能要求了 后继我会继续把结果输出到tcp,kafka来测试经过grok后的 ...

  7. .html(),.text()和.val()的差异

    .html(),.text()和.val()的差异总结:  .html(),.text(),.val()三种方法都是用来读取选定元素的内容:只不过.html()是用来读取元素的html内容(包括htm ...

  8. Python工作日类库Busines Holiday介绍

    引言: 在日常工作中.常常会碰到相似的场景.须要计算在某个时间段内的工作日以及确定某天是否为工作日,这里的介绍的工具包将很好的解决问题. 1. 工具包Business Holiday介绍 其提供了很e ...

  9. Android笔记——UI开发

    概述: 布局(Layout)的概念是针对Activity的,Activity就是布满整个Android设备的窗体或者悬浮于其它窗体上的交互界面.在一个应用程序中通常由多个Activity构成.每一个须 ...

  10. centos 6.5 安装 cx_Oracle 5.12 步骤 ，使用oracle instantclient12.1

    新建sh文件 内容如下: 以su用户执行这个文件 #!/bin/bash # INSTALL ORACLE INSTANT CLIENT # ############################# ...