只使用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. 汉诺塔III 汉诺塔IV 汉诺塔V (规律)

    汉诺塔III Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  2. 轻轻谈一下seaJs——模块化开发的利器

    "仅做一件事,做好一件事." 这个应该就是seaJs的精髓了. 我在自己的一些项目中使用过seaJs.对其算是了解一二.如今就班门弄斧.轻轻地谈一下. 首先上一段度娘的话: &qu ...

  3. iOS-BLE蓝牙开发

    Demo地址:WEBlueToothManager 在写这个博客之前,空余时间抽看了近一个月的文档和Demo,系统给的解释很详细,接口也比较实用,唯独有一点,对于设备 的唯一标示,网上众说纷纭,在这里 ...

  4. Lambda表达式图解

    internal delegate int MyDel(int x); public class Lambda { ; };//匿名方法 ; };//Lambda表达式 ; };//Lambda表达式 ...

  5. android入门——UI(4)

    GridView控件实现菜单 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xml ...

  6. 穿透的 div ( pointer-events )

    pointer-events 是一個滿有趣的 CSS3 屬性,雖然主要是針對 SVG ,但其中幾個屬性應用在 div 上也是頗有意思.顧名思義,這是一個針對滑鼠事件的屬性,預設值為 auto,若值為 ...

  7. 微信支付java版V3验证数据合法性

    [TOC] 1. 微信支付java版V3验证数据合法性 概要:使用微信支付接口时,微信会返回或回调给商户XML数据,开发者需要验证微信返回的数据是否合法. 特别提醒:商户系统对于支付结果通知的内容一定 ...

  8. Hadoop基础概念介绍

    基于YARN的配置信息, 参见: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-yarn/ hadoop入门 - 基础概念 ...

  9. 解决 winedit 打开tex文件 reading error

    从网上下载的论文模板,发现直接双击打开.tex文件(默认关联用winedit打开)时会出现reading error,然后看不到任何文字(网上有人讨论打开是乱码的问题,但是我的是完全看不到任何东西), ...

  10. Debian下自动备份文件并上传到远程FTP服务器且删除指定日期前的备份Shell脚本

    说明:  1.备份目录/home/osyunwei下面所有的文件到/home/osyunweibak里面,并且保存为osyunwei20120701.tar.gz的压缩文件格式(2012_07_01是 ...