目标：

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

侧边栏内容较少时背景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. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  2. JSP字符集编码集合

    在这里,我们先说说JSP/Servlet中的几个编码的作用. 在JSP/Servlet 中主要有以下几个地方可以设置编码,pageEncoding="UTF-8".contentT ...

  3. 为HTML5开发人员量身打造的7个Web框架

    HTML5规范开发完成时,将成为主流.据统计2013年全球将有10亿手机浏览器支持HTML5,同时HTML Web开发者数量将达到200万.毫无疑问,HTML5将成为未来5-10年内,移动互联网领域的 ...

  4. Everything:速度最快的文件名搜索工具(Linux版本) 转

    Everything是windows的一个快速搜索工具. 基本上转移到Linux上来后,没有怎么用过. 一直在用Gnome-Do,感觉还可以. 这个程序只是用来练习wxPython用的,目前还只是一个 ...

  5. 关于Mac上的开发工具

    如果是JavaScript语言的话用  Intellij IDEA 如果是C/C++语言的话用  XCode

  6. 【转】【Nginx】Nginx 入门教程 + 常用配置解析

    == Nginx介绍和安装 == Nginx是一个自由.开源.高性能及轻量级的HTTP服务器及反转代理服务器, 其性能与IMAP/POP3代理服务器相当.Nginx以其高性能.稳定.功能丰富.配置简单 ...

  7. Spring JDBC SimpleJdbcInsert类示例

    org.springframework.jdbc.core.SimpleJdbcInsert类是一个多线程,可重用的对象,为将数据插入表提供了易用的功能.它提供元数据处理以简化构建基本insert语句 ...

  8. eclipse调用jni

    http://blog.chinaunix.net/uid-27003388-id-3235189.html 1.       在Eclipse里创建一个Java project(jni_test): ...

  9. R语言colorRampPalette函数-创建颜色梯度(渐变色)

    在绘热图时,需要将数值映射到不同的颜色上,这时就需要一系列的颜色梯度 colorRampPalette 函数支持自定义的创建一系列的颜色梯度 代码示例: > colors <- color ...

  10. js中找string中重复项最多的字符个数

    // split():字符串中的方法,把字符串转成数组. // sort():数组中的排序方法,按照ACALL码进行排序. // join():数组中的方法,把数组转换为字符串 function de ...