目标：

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

侧边栏内容较少时背景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. PCL中IO模块和类的介绍

    I/O模块中共有21个类 (1)class pcl::FIleReader:定义了PCD文件的读取接口,主要用作其他读取类的父类   pcl::FileReader有pcl::PCDReader和pc ...

  2. php 常用的标签比较

    eq或者 equal 等于 neq 或者notequal 不等于 gt 大于 egt 大于等于 lt 小于 elt 小于等于 heq 恒等于 nheq 不恒等于

  3. 引用dataframe的值为什么会不同

    在R语言中,通常有一些操作符可以来提取对象的子集,如以下三种: 1.“[” 单层方括号,返回的对象与原对象类型相同,它也可以返回一个对象中的多个元素: 2.“[[” 双层方括号,用来从列表(list) ...

  4. JavaScript开源跨平台框架NativeScript

    NativeScript是一款使用JavaScript语言来构建跨平台原生移动应用的开源框架,支持iOS.Android和Windows Phone.且NativeScript的使用没有过多繁杂的要求 ...

  5. snapshots On Vmware

    快照使用 编辑 如果你创建了多于一个的虚拟机快照,那么,你将有多个还原点可以用于恢复.当你创建了一个快照,那快照些现在可写的在那个点上就变成了只读的.使用in-file delta技术就能创建新文件记 ...

  6. kali 无法使用ifconfig等常用命令

    kali无法使用ifconfig apt-get -y install net-tools

  7. qualcomm permission denied for tty device

    在app中访问串口,提示没有读写权限.本文记录解决方法. 调试 查看设备节点权限 shell@msm8909:/ # ll /dev/ttyHSL* crw------- root root 246, ...

  8. 解决git pull 每一次都需要输入密码的问题

    方法1: 当我们配置好我们的git以后呢,我们可以在配置文件~/.gitconfig 或 ~/.config/git/config 文件里加入这么两行: [credential] helper = s ...

  9. HTML5实现摇一摇的功能（实测后）--转

    eviceMotionEvent(设备运动事件)返回设备有关于加速度和旋转的相关信息.加速度的数据将包含三个轴:x,y和z(示意如下图所 示,x轴横向贯穿手机屏幕或者笔记本键盘,y轴纵向贯穿手机屏幕或 ...

  10. c#中的对象生命周期

    无论是指类型的变量或是类类型的变量,其存储单元都是在栈中分配的,唯一不同的是类类型的变量实际上存储的是该类对象的指针,相当于vc6中的CType*,只是在.net平台的语言中将指针的概念屏蔽掉了.我们 ...