只使用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. python-操作exel(xlrd,xlwt)

    1.使用第三方库 python中处理excel表格,常用的库有xlrd(读excel)表.xlwt(写excel)表.openpyxl(可读写excel表)等. xlrd读数据较大的excel表时效率 ...

  2. 【leetcode系列】Valid Parentheses

    非常经典的问题,使用栈来解决,我这里自己实现了一个栈,当然也能够直接用java自带的Stack类. 自己实现的栈代码: import java.util.LinkedList; class Stack ...

  3. python 整数和浮点数

    整数和浮点数 Python支持对整数和浮点数直接进行四则混合运算,运算规则和数学上的四则运算规则完全一致. 基本的运算: 1 + 2 + 3 # ==> 6 4 * 5 - 6 # ==> ...

  4. SQL学习之高级数据过滤

    一.高级数据过滤之IN操作符 IN 操作符用来指定条件范围,范围中的每个条件都可以进行匹配.IN取一组由逗号分隔.括在圆括号中的合法值.代码如下: select ItemId,ItemName,Che ...

  5. 更改DataTable列名方法

    1.通过DataAdapter将查询的结果填充到DataSet的表(DataTable)中: 如:dataAdapter.Fill(dataSet),这时dataSet的表名默认为Table 如果使用 ...

  6. 关于bootstrap弹出二级对话框的使用

    弹出二级对话框,即在对话框的基础上再弹出一个对话框.这对于CRM管理类系统来说应用场景很常见.看到网上有关于实现二级弹出框的方法,需要在一级对话框页面上添加不少css样式.其实,完全可以不用这么麻烦. ...

  7. java 笔试

    单例设计模式: public class Singliton { //no new private Singliton (){ } static Singliton ins = null; publi ...

  8. google base库之simplethread

    // This is the base SimpleThread. You can derive from it and implement the // virtual Run method, or ...

  9. BZOJ 3439: Kpm的MC密码( trie + DFS序 + 主席树 )

    把串倒过来插进trie上, 那么一个串的kpm串就是在以这个串最后一个为根的子树, 子树k大值的经典问题用dfs序+可持久化线段树就可以O(NlogN)解决 --------------------- ...

  10. 监听器和web国际化

    一.监听器 1.监听器:监听器就是一个java程序,功能是监听另一个java对象变化(方法调用.属性变更) 2.监听器监听过程:事件源.事件对象.监听器对象.操作事件源 1).存在被监听对象(事件源) ...