在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%生效的办法的更多相关文章

  1. 使min-height子元素height百分比生效的2种方式

    方式1,使用flex <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. 父元素设置min-height子元素设置100%问题

    问题:父元素设置min-height子元素高度设置100%取不到值,这是因为子元素 div设置 height:100%: 只有当父级元素满足min-height:1000px;设置的条件才触发: 浏览 ...

  3. 让height: 100%生效

    html: <body> <div class="box"></div> </body> css: .box{ position: ...

  4. html元素height(width)是怎么确定的？

    1.若height是确定的(比如height:100px),则height直接可确定(还受min-height,max-height影响,见height,min-height,max-heigth的作 ...

  5. 深入理解CSS系列（二）：为什么height:100%不生效？

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  6. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  7. html中设置height=100%无效的问题

    设置height=100%(网页内容能够更好的适配各种屏幕大小) 第一种是设置某个单独的div元素   height=100%无效 原因很简单,所有基于本分比的尺寸必须基于父元素,而你如果没有设置父元 ...

  8. 【转载】设置event.cancelBubble，使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  9. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

随机推荐

  1. linux Ubuntu14.04 python(c++版本） tesorflow（python版本）c++

    一.环境变量配置: export M2_HOME=/home/ustcjing/Maven/apache-maven- export JAVA_HOME=/usr/lib/jvm8/java expo ...

  2. PIE SDK专题制图保存模板

    1.    功能简介 在PIE SDK中,所有的制图元素.视图范围以及排版等都可以保存成一个模板,以供多次重复使用.使用模板时只需要打开该模板,加载相应数据,就可以直接出图,省去了重复制作图幅的麻烦, ...

  3. python 网页爬取数据生成文字云图

    1. 需要的三个包: from wordcloud import WordCloud #词云库 import matplotlib.pyplot as plt #数学绘图库 import jieba; ...

  4. c#实现wifi连接器

    前言 一般正常情况下都会用windows自带的wifi连接,但是为了给用户更好的体验,或者有时候需要检测wifi状态,还是需要集成到项目中态. 原理 1.微软自带Native Wifi API,不过是 ...

  5. MYSQL系列-MYSQL基础增强(Myql函数)

    MYSQL基础增强(Myql函数) 在这里只介绍一些常用的,比较新颖的: 字符串函数: CONCAT://字符串连接函数 mysql> SELECT CONCAT('My', 'S', 'QL' ...

  6. java io 学习笔记（一）

    java的IO操作都在java.io包下面,这个包下面有12个接口和而是多各类,类从读写的角度可以分为两种,一种是用于读,一种是用于写:从字符流字节流的角度,也可以分为两种,一种和字符有关,一种和字节 ...

  7. Python远程连接Windows，并调用Windows命令（类似于paramiko）

    import winrm win2012 = winrm.Session(')) r = win2012.run_cmd('D: &' ' cd python &' ' type s. ...

  8. Java网络编程二--基于UDP的编程

    DatagramSocket对象为基于UDP协议的Socket 构造器提供可以选择性绑定到指定端口和ip 创建完对象后调用:receive(DatagramPacket p) send(Dategra ...

  9. 深入理解java线程池—ThreadPoolExecutor

    几句闲扯:首先,我想说java的线程池真的是很绕,以前一直都感觉新建几个线程一直不退出到底是怎么实现的,也就有了后来学习ThreadPoolExecutor源码.学习源码的过程中,最恶心的其实就是几种 ...

  10. 从零开始的全栈工程师——JS面向对象（复习）

    作用域 栈内存:js执行的环境堆内存:存放代码块的空间 存放方式 键值对形式存放 字符串的形式存放js在执行之前 浏览器会给他一个全局作用域叫window 每个作用域下都分为两个模块 一个是内存模块一 ...