只使用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. 详解Spring中的CharacterEncodingFilter--forceEncoding为true在java代码中设置失效--html设置编码无效

    在项目中有很多让人头疼的问题,其中,编码问题位列其一,那么在Spring框架中是如何解决从页面传来的字符串的编码问题的呢?下面我们来看看Spring框架给我们提供过滤器CharacterEncodin ...

  2. linux内核源码阅读之facebook硬盘加速flashcache之八

    前面我们的分析中重点关注正常的数据流程,这一小节关注如果有异常,那么流程是怎么走完的呢? 1)创建新任务时kcached_job申请不到 2)读写命中时cache块为忙 3)系统关机时处理,系统开机时 ...

  3. Linux-VPN安装配置方法

    VNP服务器IP地址为:192.168.6.6 一.编译安装:   注意:可能需要ppp.libcap.libcap-devel ncurses-devel RPM 包支持,如果没有请安装 libca ...

  4. Qt程序设计——txt文本中获取字符串的问题

    QT对txt文本进行读写一般是采用QFile和QTextStream结合使用,在此不细说,主要说一下读取txt文本的注意事项.因为txt文本中有中文也有英文还有数字,要准确获得需要的字串可就要多一个心 ...

  5. 什么是xss盲打

    什么是xss盲打? 盲打仅仅是一种惯称的说法,就是不知道后台不知道有没有xss存在的情况下,不顾一切的输入xss代码在留言啊,feedback啊之类的地方,尽可能多的尝试xss的语句与语句的存在方式, ...

  6. JavaSE复习日记 : 多态

    /** * 里氏替换原则 : * 能使用父类的地方,一定可以使用子类 * 什么是多态 : * 父类的引用,指向子类的对象 * 多态的前提条件 : * 有继承关系的两个类 * 多态的目的 : * ☆☆☆ ...

  7. As Easy As A+B

    Problem Description These days, I am thinking about a question, how can I get a problem as easy as A ...

  8. R与数据分析旧笔记（五）数学分析基本

    R语言的各种分布函数 rnorm(n,mean=0,sd=1)#高斯(正态) rexp(n,rate=1)#指数 rgamma(n,shape,scale=1)#γ分布 rpois(n,lambda) ...

  9. 做了一个图片等比缩放的js

    做了一个图片等比缩放的js 芋头 发布在view:8447   今天改了一下博客的主题,发现博客主题在ie6下变样了,后来发现是因为某篇文章里的某个图片太大了撑开了容器,导致样式错位,前几天公司需求里 ...

  10. 中国 省会 地级市 经纬度 city array

    <?php $city_arr = array ( '北京' => array ( 'gis_lng' => '116.405285', 'gis_lat' => '39.90 ...