只使用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. 面向对象程序设计-C++_课时18内联函数

    使用inline说明的函数称内联函数. 在C++中,除具有循环语句.switch语句的函数不能说明为内联函数外,其他函数都可以说明为内联函数. #include <iostream> us ...

  2. Unity3d 游戏汉化之IL注入文本替换--木石世纪

    近期下了个游戏叫木石世纪(Timber and Stone),沙盒游戏类,看着还不错. 搜了下游戏资料,有人求汉化可是因为是小众游戏,没人出汉化.看了眼是Unity3d的,既然是.Net的,仅仅要资源 ...

  3. Effective JavaScript Item 36 实例状态仅仅保存在实例对象上

    本系列作为EffectiveJavaScript的读书笔记. 一个类型的prototype和该类型的实例之间是"一对多"的关系.那么,须要确保实例相关的数据不会被错误地保存在pro ...

  4. mysql基础示例

    创建数据库.创建表等: //php中按天创建表 $sql = "create database if not exists ".$db_name; $date_time_array ...

  5. IOS开发——正则表达式验证手机号、密码

    App的实际应用中,用户登陆功能基本是每个App都有需求的一个功能.而当前我们很常规的做法,就是让用户把手机号作为自己的用户名,而在注册获取短信验证码的过程中,我们首先要完成的一个步骤,就是校验用户的 ...

  6. leetcode find median sorted arrays python

    # @link http://www.cnblogs.com/zuoyuan/p/3759682.html class Solution(object): def findMedianSortedAr ...

  7. 一行统计shell

    cat count.log | awk '{print $7}' | awk '{if ($1 == "-") empty++ }END {print NR, empty, emp ...

  8. leetcode two sum python

    class Solution: # @param {integer[]} nums # @param {integer} target # @return {integer[]} def twoSum ...

  9. 多个tab切换传参

    var _ =peopleslive.h5; _.main=function(){ //集赞排名1 $('#tab1 .tab_nav').find('li').click (function() { ...

  10. codeforces 600E. Lomsat gelral 启发式合并

    题目链接 给一颗树, 每个节点有初始的颜色值. 1为根节点.定义一个节点的值为, 它的子树中出现最多的颜色的值, 如果有多种颜色出现的次数相同, 那么值为所有颜色的值的和. 每一个叶子节点是一个map ...