在css的日常应用中,经常会遇到想要通过 height: 100%来达到使子盒子与父盒子高度一样的目的,但是偶尔明明设置了height: 100%,但是却没有达到想要的结果,这次我们就一起探索一下,什么情况height: 100%有效,什么时候无效。

有效的情况

  1. 当父元素有固定高度时,子盒子可以直接使用height: 100%达到与父盒子高度相同的目的;
  2. 倘若父盒子是其中一个子盒子的高度撑开的时候,另外一个子盒子怎样才能通过height: 100% 使之高度与父盒子相同呢?其实也是有办法的,在这里我们通过子绝父相的方法。请看下面的示例:

    html为:
<div class="wrapper">
<div class="left">我是左边</div>
<div class="right">我是右边</div>
</div>

css为:

     position: relative;
/* 触发dfc,使父元素的高度等于float的盒子 */
overflow: hidden;
width: 100%;
background-color: pink;
}
.left {
float: left;
height: 300px;
width: 200px;
background-color: red;
}
.right {
position: absolute;
left: 200px;
height: 100%;
background-color: blue;
}

效果为

无效的情况(当父盒子被其中一个盒子的高度撑开时)

  1. 要设置的盒子都是inline-block时无效;
  2. 要设置的盒子为float元素时无效;
  3. 要设置的盒子为除了position的其他定位时无效;
  4. 要设置的盒子为flex元素时无效;

css之height: 100%的有效场景的更多相关文章

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

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

  2. IE6 CSS高度height:100% 无效解决方法总结

    原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html   上面红色部分为 height:100%; 自动拉 ...

  3. css设置height 100%

    需要显式设置html,body为100%,body是相对于html,wrapper是相对于body html,body{ height: 100%; } .wrapper{ height: 100; ...

  4. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

  5. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  6. 关于height:100%两三事

    对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...

  7. 如何让div中的span垂直居中 ----height:100%设置div的高度

    如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...

  8. css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  9. CSS中设置height:100%无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

随机推荐

  1. linux在不关机情况下新增硬盘的方法

    开机状态插入硬盘 不关机执行命令 echo "- - -" > /sys/class/scsi_host/host0/scan 注意 echo "- - -&quo ...

  2. Aliyun 安装NPM 总是3.5.2 解决方案

    由于默认的命令 阿里云安装的 Node 是 8.x 版本 导致NPM 一直安装的都是 3.5.2 版本,死活升级不上去 最后手动安装指定版本解决 wget -qO- https://deb.nodes ...

  3. CodeForces-1221A-2048 Game-思维题

    You are playing a variation of game 2048. Initially you have a multiset ss of nn integers. Every int ...

  4. CometOJ Contest #3 C

    题目链接:https://cometoj.com/contest/38/problem/C?problem_id=1542&myself=0&result=0&page=1&a ...

  5. 2019 USP Try-outs 练习赛

    // 好久没更博客了,最近打了很多场练习赛&校内PK赛,大概自闭忙于补题吧 // 9.26 周四练习赛 A. Kolkhozy 题意 有 n 个数 \(f[i]\) ,有 q 次询问(l, r ...

  6. js面向对象编程:this究竟代表什么?第二篇

         总觉得自己弄明确了js中this的含义.this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象.但前几天自己写脚本却遇到了一个非常奇怪的问题.    代码例如以下:   ...

  7. Spring 基于xml配置方式的事务(14)

    参考前面的声明式事务的例子:http://www.cnblogs.com/caoyc/p/5632198.html 我们做了相应的修改.在dao中和service中的各个类中,去掉所有注解标签.然后为 ...

  8. Deep Dive into Neo4j 3.5 Full Text Search

    In this blog we will go over the Full Text Search capabilities available in the latest major release ...

  9. JDBC_入门及注入问题

    .JDBC基本概念: java database Connectivity java数据库连接,java语言操作数据库 本质: 官方定义的一套操作所有关系型数据库的规则,即接口. 各个数据库厂商实现这 ...

  10. Activiti学习笔记目录

    1.Activiti学习笔记1 — 下载与开发环境的配置: 2.Activiti学习笔记2 — HelloWorld: 3.Activiti学习笔记3 — 流程定义: 4.Activiti学习笔记4 ...