使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 ...
随机推荐
- PIE SDK栅格增强控制
1. 功能简介 亮度是指发光体(反光体)表面发光(反光)强弱的物理量:对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量:透明度是描述光线透过的程度 栅格数据增强控制主要是通过对亮 ...
- 迪米特法则（Law of Demeter）LoD
using System; using System.Collections.Generic; using System.Text; namespace LawOfDemeter { //也叫Leas ...
- Hsl PLC
https://github.com/dathlin/HslCommunication 地址
- nodejs日志管理log4js
常用的2种配置: 1.按文件大小分片,备份若干数量的文件 var log4js = require('log4js'); log4js.configure({ "appenders" ...
- 转：JAVA线程池ThreadPoolExecutor与阻塞队列BlockingQueue
从Java5开始,Java提供了自己的线程池.每次只执行指定数量的线程,java.util.concurrent.ThreadPoolExecutor 就是这样的线程池.以下是我的学习过程. 首先是构 ...
- HDU 1800——Flying to the Mars——————【字符串哈希】
Flying to the Mars Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...
- bzoj 3716: [PA2014]Muzeum
Description 吉丽的漫展有n件手办和m名警卫.建立平面直角坐标系,每个手办和警卫都可以看做一个点.警卫们的目光都朝着y轴负方向,且都有相同大小的视角.警卫可以看见自己视角内(包括边界上的点) ...
- MySQL中设置同一张表中一个字段的值等于另一个字段的值
今天遇到了一个需求,我在一张表中新增了一个字段,因为这张表以前已经有很多数据了,这样对于以前的数据来说,新增的这个字段的值也就是为该字段的默认值,现在需要将新增的这个字段添加上数据,数据来源为同表的另 ...
- UML建模—EA创建Class(类图)
1.新建类图 2.添加类或接口 在类图可以捕获系统-类-和模型组件的逻辑结构.它是一个静态模型,描述存在什么,有哪些属性和行为,而不管如何去做. 说明关系之间的类和接口; 泛化. 聚合和关联是在分别反 ...
- 关于C#的Lock锁思考
大家都知道多线程并发时候存在一个线程同步的问题,一般使用lock关键字来处理. lock关键字的结果如下: object locker=new object(); lock(locker) { ... ...