css中如何实现左边的高度随着右边改变而改变

html结构：

<div class="main">

    <div class="main_left"></div>

    <div class="main_right></div>

</div>

css样式：

.main{ overflow: hidden; }

.main_left{ width: 20%;  height:100%; float: left; background-color: #fff; padding-bottom:9999px; margin-bottom:-9999px;}

.main_right{ width: 80%; float: right; box-shadow: inset 0 0 5px #000; padding:15px; box-sizing: border-box; height: 100%; overflow: hidden; }

实际上起到核心作用的是padding-bottom:9999px; margin-bottom:-9999px;这一部分让div填充满整个父框架

css中如何实现左边的高度随着右边改变而改变的更多相关文章

  1. CSS中image和text显示高度不一致的问题

    将它们分别添加新的属性: float: left 就可以解决

  2. CSS中让一个div的高度随着另外个一个统计的div的高度变化而变化的代码

     .w1002 .left_part{overflow:hidden; padding-bottom:9999px; margin-bottom:-9999px;display:inline;}

  3. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  4. css中div高度自适应

    高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...

  5. 右边根据左边的高度自动居中只需要两行CSS就可以完成

    右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...

  6. CSS 中的高度百分比

    CSS 中可以使用%来给定指定元素的大小,也就是高度.宽度.margin,padding 等等,但是相信很多人都对百分比表示法的具体含义并不清楚,那么不懂就练,毕竟是检验真理的唯一标准(考研党举个手我 ...

  7. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  8. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  9. 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局

    前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...

随机推荐

  1. java中HashMap的基本方法使用

    遍历,添加词,等等 package test; import java.util.HashMap; import java.util.Iterator; import java.util.ArrayL ...

  2. 棋盘问题（NOIP1997）

    题目链接:棋盘问题 这道题水不水呢?还是很水的,为什么?因为数据太小了.直接算就行了. #include<bits/stdc++.h> using namespace std; int m ...

  3. 41.App 框架的搭建思路以及代码的规范

    本链接  引用别人文章https://www.jianshu.com/p/d553096914ff

  4. windows下误修改了环境变量path怎么办

    1.在我的电脑图标中右键属性调出系统属性窗口2.在系统属性窗口中找到高级选择卡3.在高级选项卡中找到环境变量按扭并单击打开4.在弹出的环境变量窗口中,在系统变量(S)下的框框中找到并单击选择Path变 ...

  5. Android APP测试流程

    一. Monkey测试(冒烟测试) 使用monkey测试工具进行如下操作: 1. APP的安装 2. APP随机操作测试(APP压力测试) 3. APP的卸载 二. 安装卸载测试 1. 使用测试真机进 ...

  6. nginx自动启动脚本

    #!/bin/bash#nginx - this script starts and stops the nginx daemin # # chkconfig: - 85 15 # descripti ...

  7. PHP continue break 区别 用法

    <?php //continue 跳过当前循环,进行下一个 //break 终止当前循环 $db=new PDO("mysql:host=localhost;dbname=root&q ...

  8. C++ —— 重载、覆盖和隐藏

    一.重载 发生在同一个类当中,当在同一类当中定义了方法A,然后又定义了方法B,B和A的方法名相同,但是参数不同,那么再是称B重载了方法A. class test{ public: void A(); ...

  9. android 按照拼音模糊查询中如何把字符转换成拼音

    http://files.cnblogs.com/liaolandemengxiang/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9.rar 首先转换成的 ...

  10. spring boot学习笔记2

    开场知识: spring 容器注入bean,时容器初始化的一些接口以及接口调用的时间先后顺序: 1)BeanFactoryPostProcessor 容器初始化的回调方法 * BeanFactoryP ...