只使用css实现 有两种方式,

一种是通过相对定位,再绝对定位获取父亲元素的高度,

一种是通过margin-bottom:-999em;padding-bottom: 999em; 父亲元素超出隐藏

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 <style>

     *{margin: 0; padding: 0}

     .wrap{

         position: relative;

         width:50px;

     }

     .wrap .left {

         position: absolute;

         height: 100%;

         top: 0;

         left: 50px;

         background: lightblue;

     }

     .wrap .main {

         background: lightgray;

     }

 </style>

 实现一,通过 定位获取父亲元素的高度实现

 <div class="wrap">

     <div class="left">

         侧栏

     </div>

     <div class="main">

     可以改变 高度 侧栏自动识别高度

     </div>

 </div>

 <style>

     .wrap2{

         overflow: hidden;

     }

     .wrap2 .left {

         float: left;

         width:20px;

         margin-bottom: -999em;

         padding-bottom: 999em;

         background: lightgray;

     }

     .wrap2 .main {

         float: left;

         width:50px;

         background: lightblue;

     }

 </style>

 实现二,使用margin 和padding 配合使用

 <div class="wrap2">

     <div class="left">

         侧栏

     </div>

     <div class="main">

         可以改变 高度 侧栏自动识别高度

     </div>

 </div>

 </body>

 </html>

弊端:

方案 2 针对是背景, 使用边框会 无下边框 需要注意,因为超出隐藏了,部分效果也有影响,

css布局: 两栏 自适应高度的更多相关文章

  1. css布局 - 两栏自适应布局的几种实现方法汇总

    这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需: 整理了几种实现方法,当然,风骚的代码不止这几种能实现,欢迎各位的补充. 方法汇总目录 简 ...

  2. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  3. css实现等高布局 两栏自适应布局 三栏自适应布局

    等高布局: HTML结构如下: <div class="wrapper"> <div class="box"> <h1>.. ...

  4. div+css 左右两列自适应高度 ，以及父级div也跟着自适应子级的高度（兼容各大浏览器）

    <style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...

  5. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

  6. css布局 三栏 自动换行

    1.代码实现 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UT ...

  7. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  8. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  9. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

随机推荐

  1. 随心所欲~我也做个集合遍历器吧（自己的foreach，委托的威力）

    感觉微软在面向对象三大原则中,封装性运用的最为突出,它会将一些复杂的算法,结构,功能代码进行封装,让程序员在使用时十分得心应手,如关键字里的foreach和labmda表达式里的Foreach等等,今 ...

  2. How to Type(dp)

    How to Type Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  3. HDU 3037 Saving Beans(Lucas定理的直接应用）

    解题思路: 直接求C(n+m , m) % p , 由于n , m ,p都非常大,所以要用Lucas定理来解决大组合数取模的问题. #include <string.h> #include ...

  4. SICP 习题 （1.10）解题总结

    SICP 习题 1.10 讲的是一个叫“Akermann函数”的东西,去百度查可以查到对应的中文翻译,叫“阿克曼函数”. 就像前面的解题总结中提到的,我是一个数学恐惧者,看着稍微复杂一点的什么函数我就 ...

  5. 【DateStructure】 Charnming usages of Map collection in Java

    When learning the usage of map collection in java, I found serveral beneficial methods that was enco ...

  6. 性能优化工具---iostat

    Iostat (参考 man iostat) 可选项: -c为汇报CPU的使用情况: -d为汇报磁盘的使用情况: -k表示每秒按kilobytes字节显示数据: -t为打印汇报的时间: -v表示打印出 ...

  7. Android入门——UI(2)

    介绍SeekBar拖动条控件.ProgressBar进度条控件.DatePicker日历控件.TimePicker时间控件 <?xml version="1.0" encod ...

  8. 解决 jQuery-datepicker无法弹出日期的问题

    1.确保 jquery-ui.css.jquery.min.js和jquery-ui.min.js 三个文件的引用 2.如果是下载网站上的html,需要删除时间<input>的hasDat ...

  9. vs 中 vim vax 快捷键

    高效率移动 在插入模式之外 基本上来说,你应该尽可能少的呆在插入模式里面,因为在插入模式里面VIM就像一个“哑巴”编辑器一样.很多新手都会一直呆在插入模式里面,因为这样易于使用.但VIM的强大之处在于 ...

  10. Qt QToolTip 控件背景的 QSS 设置方法(摘抄)

    Qt/C++/CSS: QTooltip stylesheet background colour Hi there, I've recently come across a problem deve ...