知识点:

绝对定位+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. LaTeX 相对于 Word 有什么优势？

    sjhstone ,本科EE在读 vczh等 276 人赞同 [Word公式进阶请往下翻]有人还写过论文,参见PLOS ONE: An Efficiency Comparison of Documen ...

  2. 客户端的javascript改变了asp.net webform页面控件的值，后台代码中如何获取修改后的值。

    客户端的javascript改变了asp.net webform页面控件的值,后台代码中如何获取修改后的值.     无论是什么的html控件,只要加上了runat="server" ...

  3. WCF和Socket

    WCF的全称是:Windows Communication Foundation.它是建立在Web Service架构上的一个全新的通信平台.它使用相同的基础结构和 API 来创建应用程序,这些应用程 ...

  4. 使用免安装版本在windows上手动安装PostgreSQL

    PostgreSQL支持管理员直接手动安装数据库,给用户提供了更大的方便.     1. 在PostgreSQL官方网站上下载免安装二进制的包,名字类似于postgresql-*.*.*.*-bina ...

  5. 在Ubuntu Server上源码安装OpenERP 8.0，并配置wsgi和nginx运行环境

    原文: How to install OpenERP 8.0 Alpha on a fresh Debian / Ubuntu server. OpenERP的安装,可以有多种方式,通过添加源,到 h ...

  6. go语言基础之iota枚举

    1.iota (在常量的时候,当成枚举使用) 示例1 package main import "fmt" func main() { //1.iota常量自动生成器,每个一行,自动 ...

  7. JVM调优思路

    一.jvm内存调优 (Gc  和 Full gc) hotspot -Xms40m  最小堆内存 -Xmx512m 最大值内存 -verboose:gc -XX:PrintGCDetails -XX: ...

  8. request.startAsync()不支持异步操作

    Servlet3.0使用异步处理时,后台报错: java.lang.IllegalStateException: A filter or servlet of the current chain do ...

  9. Python爬虫之一 PySpider 抓取淘宝MM的个人信息和图片

    ySpider 是一个非常方便并且功能强大的爬虫框架,支持多线程爬取.JS动态解析,提供了可操作界面.出错重试.定时爬取等等的功能,使用非常人性化. 本篇通过做一个PySpider 项目,来理解 Py ...

  10. 与Xamarin.Forms跨平台的用户界面

    Xamarin.Forms 与Xamarin.Forms跨平台的用户界面 Xamarin的. 形式是一个跨平台的UI工具包,它允许开发人员 轻松地创建本地用户界面布局,可以共享 在Android,iO ...