目标：

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

侧边栏内容较少时背景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. 编译和运行java文件 找不到或无法加载主类

    这边提供一个关于程序中含有package关键字,使用“终端”运行程序时出现“找不到或无法加载主类”,而使用Eclipse软件可以正常运行程序的可能解决办法. 例如程序名为HelloWorldTest. ...

  2. github fork 同步

    git remote -v git remote add upstream url git fetch upstream git checkout master git merge upstream/ ...

  3. [impala] impala 简介

    [简介] Impala是Cloudera公司主导开发的新型查询系统,它提供SQL语义,能查询存储在Hadoop的HDFS和HBase中的PB级大数据.已有的Hive系统虽然也提供了SQL语义,但由于H ...

  4. e856. 列出一个组件的所有事件

    This example demonstrates how to list all the actions in a component. ActionMap map = component.getA ...

  5. Linux——curl(转)

    先介绍curl工具的使用,在其他文章中介绍如何使用curl发送Identity API linux curl是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是综合传输工具 ...

  6. OpenMP并行编程应用—加速OpenCV图像拼接算法

    OpenMP是一种应用于多处理器程序设计的并行编程处理方案,它提供了对于并行编程的高层抽象.仅仅须要在程序中加入简单的指令,就能够编写高效的并行程序,而不用关心详细的并行实现细节.减少了并行编程的难度 ...

  7. 如何使用 OpenFileDialog 组件 (选择文件组件)

        向程序设计窗体中添加一个OpenFileDialog控件,在属性对话框中设置其Filter属性为 "所有文件(*.*)|*.*|文本文件(*.txt)|*.txt|WPS文档(*.w ...

  8. Hadoop(HA)分布式集群部署

    Hadoop(HA)分布式集群部署和单节点namenode部署其实一样,只是配置文件的不同罢了. 这篇就讲解hadoop双namenode的部署,实现高可用. 系统环境: OS: CentOS 6.8 ...

  9. js 模拟鼠标事件

    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...

  10. Javascript实例教程:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素，如果没有匹配的元素则返回null。

    文章简介:querySelector()方法接受一个CSS查询并返回匹配模式的第一个子孙元素,如果没有匹配的元素则返回null. querySelector()方法接受一个CSS查询并返回匹配模式的第 ...