目标：

实现左边侧边栏固定，右边内容区自适应

侧边栏内容较少时背景100%高度展示

侧边栏内容较多时可以滚动，且不让显示滚动条(显示太丑)

内容区较少时不出现滚动条，较多时可以滚动

code:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

  * {

    padding: 0;

    margin: 0;

  }

  .wrapper {

    position: relative;

    height: 100%;

    width: 100%;

  }

  .left {

    width: 180px;

    position: fixed;

    top: 0;

    bottom: 0;

    left: 0;

    z-index: 1001;

    overflow: hidden;

  }

  .menu {

    min-height: 100%;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: -17px;

    overflow-y: scroll;

    background-color: yellow;

  }

  .content {

    min-height: 100%;

    margin-left: 180px;

    background-color: green;

  }

  </style>

</head>

<body>

  <div class="wrapper">

    <div class="left">

      <ul class="menu">

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

        <li>我是列表</li>

      </ul>

    </div>

    <div class="content">

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    	<p>我是内容</p>

    </div>

  </div>

</body>

</html>

css后台页面布局技巧的更多相关文章

  1. CSS进阶内容——布局技巧和细节修饰

    CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...

  2. DIV+CSS常用网页布局技巧！

    以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...

  3. html div+css做页面布局

    http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...

  4. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  5. 01 DIV+CSS 固定页面布局

    本文讲解使用DIV+CSS布局最基本的内容,读完本文你讲会使用DIV+CSS进行简单的页面布局. DIV+CSS布局中主要CSS属性介绍: Float: Float属性是DIV+CSS布局中最基本也是 ...

  6. bootstrap+css进行页面布局

    效果 用到了bootstrap中的表格css.圆形css.以及上一页下一页css. 布局页面,填充数据,实现js动态效果(比如点击下一页,上一页),逐步完善. 不仅仅要会使用bootstrap中的样式 ...

  7. css篇-页面布局-三栏布局

    页面布局 题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. 1)浮动 2)绝对定位 3)Flexbox 4)表格布局 5)网格布局(CSS3的Grid布局) 代码: ...

  8. html css 网络 页面布局 颜色 参考 拾取器网址

    http://blog.163.com/wujinhongisme@126/blog/static/3613698020095115919389/ ========================== ...

  9. CSS精粹之布局技巧

    1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS都有检测工具可用,请见http://validator.w3.org 请注意,在文件开头的错误, ...

随机推荐

  1. 很简洁的分页控件 适合MVC

    <!DOCTYPE html> <html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml" ...

  2. linq操作符：聚合操作符

    一.Aggregate操作符 Aggregate操作符对集合值执行自定义聚合运算.来看看Aggregate的定义: public static TSource Aggregate<TSource ...

  3. R-table和tapply函数

    table可统计数据的频数 tapply可根据因子.向量和要计算的函数计算 > class<-c(1,2,3,2,1,2,1,3) > class[1] 1 2 3 > c(8 ...

  4. ubuntu/debian安装mysql遇到的问题及解决方法_1.dpkg中mysql-server-5.5 (configure)时出错 mysql-server-5.5 E: Sub-process /usr/bin/dpkg returned an error code (1)

    我的debian7之前安装了mysql-server,是通过apt安装的,后来我卸载掉, 然后用whereis mysql查找, 把所有关于mysql的目录删除掉,包括带mysqld的目录及文件. 重 ...

  5. 基于php，点亮代码生成技能树

    <?php $table = ($_GET['action']); /*生成后端*/ $fileName="core/Motherboard.php"; $handle=fo ...

  6. 关于Unity中粒子效果的使用

    粒子效果1: 游戏中会有很炫酷的特效,比如爆炸,水花,火焰等;2: unity提供粒子编辑器,方便特效人员来开发很炫酷的特效;3.粒子效果一般有专门的粒子特效师来做,我们只需要拿来用就好了,很多参数没 ...

  7. Ubuntu上CUDA环境搭建

    1.下载CUDA:https://developer.nvidia.com/cuda-toolkit-archive (如果已经安装了N卡驱动,最好用.deb,如果没有安装,可以用.run) 2.根据 ...

  8. SAP 金税接口代码 供参考

    程序可以通过抓取 客户 开票信息等 下载文本 导出 需要事先创建好几个structure zc0000sdt0016, zc0000sdt0017 REPORT zc0000sdr0016 NO ST ...

  9. MySQL迁移数据库（mysqldump）

    一.导出导入所有数据库的数据 1.导出 mysqldump -u root -p123456 --all-databases > all.sql 2.导入 mysql -u root -p123 ...

  10. MongoDB MapReduce 小例子

    var map = function(){ if (this.gscode == "ZTJB"){ ymd = this.ymd; emit("maxymd", ...