使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 ...
随机推荐
- WPF 使用第三方ttf字体
1.将字体文件直接添加到项目中,注意:将文件的“属性”--“生成操作”设置为“Resource” 2.在Xaml中使用,text可以使用文字或直接使用unicode编码,XAML中使用Unicode编 ...
- protobuf参考
https://www.cnblogs.com/chenyangyao/p/5422044.html
- TOJ 4393 Game
描述 Bob always plays game with Alice.Today,they are playing a game on a tree.Alice has m1 stones,Bob ...
- JNI与NDK的区别
JNI是Java调用Native机制,是Java语言自己的特性全称为Java Native Interface,类似的还有微软.Net Framework上的p/invoke,可以让C#或Visual ...
- java并发编程 - Exexctor简介
Exexctor 常用类关系图 Executor 接口 Excutor 接口定义如下 ExecutorService ExecutorService 是一个比 Executor 使用更广泛的子类接口, ...
- React.js 小书 Lesson10 - 组件的 state 和 setState
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson10 转载请注明出处,保留原文链接和作者信息. state 我们前面提到过,一个组件的显示形态 ...
- gitbook一仓库多本书持续化部署
引言 本文档用户指导新手如何部署GitLab+Jenkins自动化构建GitBook,并使用Nginx发布资料.在部署过程中,如遇到任何问题,请自行百度. 注意: 此文章的环境和数据,仅为用于调试的片 ...
- Visual Studio中C++项目编译常见问题总结
1. 工程引用外部头文件 工程->属性->配置属性->C/C++ ->常规->附加包含目录:输入头文件存放目录 2. 添加lib库引用 添加lib库的路径:工程-> ...
- C# 获取字符串长度
int leng = System.Text.Encoding.Default.GetBytes(attachfileId2).Length;
- 在 Azure Web 应用中创建 PHP 应用程序
本分步指南将通过 Azure Web 应用帮助您启动并运行示例 PHP 应用程序.除 PHP 外,Azure Web 应用还支持其他语言,如 Java..NET.Node.JS.Python.Ruby ...