css之height: 100%的有效场景
在css的日常应用中,经常会遇到想要通过 height: 100%
来达到使子盒子与父盒子高度一样的目的,但是偶尔明明设置了height: 100%
,但是却没有达到想要的结果,这次我们就一起探索一下,什么情况height: 100%
有效,什么时候无效。
有效的情况
- 当父元素有固定高度时,子盒子可以直接使用
height: 100%
达到与父盒子高度相同的目的; - 倘若父盒子是其中一个子盒子的高度撑开的时候,另外一个子盒子怎样才能通过
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;
}
效果为
无效的情况(当父盒子被其中一个盒子的高度撑开时)
- 要设置的盒子都是inline-block时无效;
- 要设置的盒子为float元素时无效;
- 要设置的盒子为除了position的其他定位时无效;
- 要设置的盒子为flex元素时无效;
css之height: 100%的有效场景的更多相关文章
- css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- IE6 CSS高度height:100% 无效解决方法总结
原文地址:http://www.cnblogs.com/huangyong8585/archive/2013/02/05/2893058.html 上面红色部分为 height:100%; 自动拉 ...
- css设置height 100%
需要显式设置html,body为100%,body是相对于html,wrapper是相对于body html,body{ height: 100%; } .wrapper{ height: 100; ...
- 【CSS系列】height:100%设置div的高度
一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...
- 关于 iframe 在ie11 height:100% 无效的巨坑
好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...
- 关于height:100%两三事
对于CSS的height:100%,顾名思义,该元素的高度自动填充为其父元素的高度.但该样式有时候会不起作用,Mark down 一下.>< 首先,看一下以下CSS代码: div { he ...
- 如何让div中的span垂直居中 ----height:100%设置div的高度
如果div中只有一个span一个元素,可以使用line-height.如果div中还有其他元素,可以设置span的css如下: .span{ position: absolute; top: 50%; ...
- css top,right,bottom,left设置为0有什么用?它和width:100%和height:100%有什么区别?
壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...
- CSS中设置height:100%无效的解决方案
在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...
随机推荐
- linux在不关机情况下新增硬盘的方法
开机状态插入硬盘 不关机执行命令 echo "- - -" > /sys/class/scsi_host/host0/scan 注意 echo "- - -&quo ...
- Aliyun 安装NPM 总是3.5.2 解决方案
由于默认的命令 阿里云安装的 Node 是 8.x 版本 导致NPM 一直安装的都是 3.5.2 版本,死活升级不上去 最后手动安装指定版本解决 wget -qO- https://deb.nodes ...
- CodeForces-1221A-2048 Game-思维题
You are playing a variation of game 2048. Initially you have a multiset ss of nn integers. Every int ...
- CometOJ Contest #3 C
题目链接:https://cometoj.com/contest/38/problem/C?problem_id=1542&myself=0&result=0&page=1&a ...
- 2019 USP Try-outs 练习赛
// 好久没更博客了,最近打了很多场练习赛&校内PK赛,大概自闭忙于补题吧 // 9.26 周四练习赛 A. Kolkhozy 题意 有 n 个数 \(f[i]\) ,有 q 次询问(l, r ...
- js面向对象编程:this究竟代表什么?第二篇
总觉得自己弄明确了js中this的含义.this总是指向调用方法的对象,作为方法调用,那么this就是指实例化的对象.但前几天自己写脚本却遇到了一个非常奇怪的问题. 代码例如以下: ...
- Spring 基于xml配置方式的事务(14)
参考前面的声明式事务的例子:http://www.cnblogs.com/caoyc/p/5632198.html 我们做了相应的修改.在dao中和service中的各个类中,去掉所有注解标签.然后为 ...
- 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 ...
- JDBC_入门及注入问题
.JDBC基本概念: java database Connectivity java数据库连接,java语言操作数据库 本质: 官方定义的一套操作所有关系型数据库的规则,即接口. 各个数据库厂商实现这 ...
- Activiti学习笔记目录
1.Activiti学习笔记1 — 下载与开发环境的配置: 2.Activiti学习笔记2 — HelloWorld: 3.Activiti学习笔记3 — 流程定义: 4.Activiti学习笔记4 ...