使flex-direction: column的子元素height: 100%生效的办法
在flex-direction: column子元素里直接使用height：100%，height并不会被设置成100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.height-500-px {
height: 500px;
}
.height-100-per {
height: 100%;
}
.bg-gray {
background: gray;
}
.bg-yellow {
background: yellow;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-grow-1 {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="flex-column height-500-px bg-gray">
<div class="flex-grow-1">
<div class="height-100-per bg-yellow"></div>
</div>
</div>
</body>
</html>
解决办法是在flex-grow-1这一层再加一个flex row
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.height-500-px {
height: 500px;
}
.height-100-per {
height: 100%;
}
.bg-gray {
background: gray;
}
.bg-yellow {
background: yellow;
}
.bg-blue {
background: blue;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-grow-1 {
flex-grow: 1;
}
.flex-column-row {
display: flex;
flex-direction: row;
}
</style>
</head>
<body>
<div class="flex-column height-500-px bg-gray">
<div class="flex-grow-1 flex-column-row">
<!-- 注意不要加height:100% -->
<div class="bg-yellow flex-grow-1 height-100-per"></div>
</div>
<div class="flex-grow-1 flex-column-row">
<div class="bg-blue flex-grow-1"></div>
</div>
<div class="flex-grow-1 flex-column-row" style="overflow:hidden"> <!-- 为了防止内部的内容撑大，加上overflow:hidden -->
<div class="flex-grow-1">
<!-- 里面一层加height:100%是可以的 -->
<div class="bg-yellow height-100-per"></div>
</div>
</div>
</div>
</body>
</html>
从以上情况可以大致推测
flex-column子元素的height:100%会优先于flow布局来计算高度，所以直接在flex-column子元素设height:100%没有效果，因为在计算height:100%的时候，高度为0
使flex-direction: column的子元素height: 100%生效的办法的更多相关文章
- 使min-height子元素height百分比生效的2种方式
方式1,使用flex <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- 父元素设置min-height子元素设置100%问题
问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...
- 让height: 100%生效
html: <body> <div class="box"></div> </body> css: .box{ position: ...
- html元素height(width)是怎么确定的？
1.若height是确定的(比如height:100px),则height直接可确定(还受min-height,max-height影响,见height,min-height,max-heigth的作 ...
- 深入理解CSS系列（二）：为什么height:100%不生效？
对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...
- chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素
1 <div class="container"> <div class="item"> <div class="ite ...
- html中设置height=100%无效的问题
设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素 height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...
- 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick
由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...
- css使子元素在父元素居中的各种方法
html结构: <div class="parent"> <div class="child"></div> </di ...
随机推荐
- rsync 问题总结
Rsync服务常见问题汇总讲解:==================================1. rsync服务端开启的iptables防火墙 [客户端的错误] No route to ...
- 牛客网Java刷题知识点之Map的两种取值方式keySet和entrySet、HashMap 、Hashtable、TreeMap、LinkedHashMap、ConcurrentHashMap 、WeakHashMap
不多说,直接上干货! 这篇我是从整体出发去写的. 牛客网Java刷题知识点之Java 集合框架的构成.集合框架中的迭代器Iterator.集合框架中的集合接口Collection(List和Set). ...
- 已知tomcat应用名称，如何查询该应用端口号
假设应用名称叫pear,并假设路径为:/datong/tomcat-pear/ 方法一,根据PID查找应用端口号,前提是应用已经运行 1,找到改应用的PID:ps -ef | grep pear | ...
- LeetCode 319 ——Bulb Switcher——————【数学技巧】
319. Bulb Switcher My Submissions QuestionEditorial Solution Total Accepted: 15915 Total Submissions ...
- （三）TestNG
1.testNG的部分注解 test测试方法都是执行顺序:并不是从上往下执行的,而是根据方法名ASCII码进行执行的,小的先执行 比如a比b先执行,1比2先执行,不管代码放的顺序是怎么样. impor ...
- webbrowser使用已过期资源的一个报错
如果webbrowser控件已更新,仍使用一个HtmlElement就会出现以下错误: 2013-12-23 17:33:48,375 [18] ERROR xx.xxx<Run>b__0 ...
- js经验点滴js apply/call/caller/callee/bind使用方法与区别分析
一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, ...
- Ajax的XMLHttpRequest对象
编写一个例子:从服务器取回一个Hello Ajax字符串. HTML: <input type="button" value="ajax提交" oncli ...
- html元素固定
1.position 值 描述 static 默认.位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top.bottom.left 或 ri ...
- python之高阶函数map/reduce
L = [] for n in [1, 2, 3, 4, 5, 6, 7, 8, 9]: L.append(f(n)) print(L) Python内建了map()和reduce()函数. 我们先看 ...