目标：

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

侧边栏内容较少时背景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. python转义符的使用

    写了几行代码不能用.========有个需要的注意的就是在pycharm中看见蓝色字体要注意了一定是关键字什么,这个以后要注意. import os # g = os.walk("D:\aa ...

  2. linq操作符：元素操作符

    元素操作符仅返回一个元素. 一.Fitst操作符 First操作符将返回序列中的第一个元素.如果序列中不包含任何元素,则First<T>方法将引发异常.来看看First()方法的定义: 从 ...

  3. SpringBoot 中常用注解@Controller/@RestController/@RequestMapping的区别

    SpringBoot中常用注解@Controller/@RestController/@RequestMapping的区别 @Controller 处理http请求 @Controller //@Re ...

  4. jquery+easyui开发、培训文档

    目  录 1.... Accordion(可折叠标签)......................................................................... ...

  5. 数据框排序 data.frame order

    # sorting examples using the mtcars datasetattach(mtcars) # sort by mpgnewdata <- mtcars[order(mp ...

  6. R语言-向量化操作（apply、tapply、lapply、sapply、mapply、table等）

    一.apply函数(对一个数组按行或者按列进行计算): 使用格式为:apply(X, MARGIN, FUN, ...) 其中X为一个数组:MARGIN为一个向量(表示要将函数FUN应用到X的行还是列 ...

  7. [技术选型] spring boot

    参考博客:http://jinnianshilongnian.iteye.com/blog/1997192 官网:http://projects.spring.io/spring-boot/ 7天学会 ...

  8. Visual Studio 2013新建ASP.NET项目使用Empty模板，在页面中使用验证控件出错的解决方案

    Visual Studio 2013新建ASP.NET项目使用Empty模板,在页面中使用验证控件,运行页面,会出现如下的错误: 错误原因 VisualStudio 2012(或2013) WebFo ...

  9. "iostat" On Linux

    CPU是一台电脑的大脑.所有的处理命令都运行在上面.I/O(输入/输出)同样扮演了一个重要角色.硬盘用于提供数据给处理器并保存CPU处理过的数据.一种衡量处理器和I/O利用率的方法是使用iostat命 ...

  10. c、c++---linux上的GetTickCount函数

    http://blog.csdn.net/guang11cheng/article/details/6865992 http://wenda.so.com/q/1378766306062794