在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. Valgrind 检测程序内存使用

    Valgrind是用于构建动态分析工具的探测框架.它包括一个工具集,每个工具执行某种类型的调试.分析或类似的任务,以帮助完善你的程序.Valgrind的架构是模块化的,所以可以容易地创建新的工具而又不 ...

  2. V1-Team Scrum Meeting 博客汇总

    V1-Team Scrum Meeting 博客汇总 计划文档 功能规格说明书 技术规格说明书 项目分解 贡献分配规则 一.Alpha阶段 第一次 Scrum Meeting 第二次 Scrum Me ...

  3. 第十八章：自定义splash screen、app icon和tab icon

    本文介绍如何自定义splash screen.app icon和tab icon. 1. 自定义splash screen和app icon 1.1 产生resources文件夹,启动命令行: ion ...

  4. Hash索引和B+树索引总结

    先说Hash索引 在理想的情况下,key非常分散,不存在Hash碰撞的话,采用Hash索引可以唯一得确定一个key的位置,并且这个位置上就只有一个key,所以查找时间复杂度是O(1),非常快,这是Ha ...

  5. python中时间对象生成及时间格式的转换

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  6. CSS3实现鼠标悬停扩展效果

    我们在做导航标签的时候,有时会出现空间过于拥挤需要隐藏部分内容的情况,所以在这里我自己写了一个鼠标悬停显示扩展内容的效果,如下图所示. 总的来说效果还是比较好实现,但是比较头疼的是三角部分使用了伪元素 ...

  7. hrb——开锁魔法I——————【规律】

    解题思路:从1到n的倒数之和. #include<stdio.h> #include<string.h> #include<algorithm> using nam ...

  8. pL/SQL 创建DBLIKN

    某些时候,需要关联不同的数据库进行数据查询.操作等. 在Oracle中,关联不同的数据库进行表关联,就要用到了数据库连接(DB link). 创建DB link有两种方法:通过SQL语句创建,通过可视 ...

  9. （六-1）Firefox插件安装

    1.安装火狐插件 ①旧版本firefox 火狐浏览器右上角-->附件-->获取更多附件-->搜索-->Firebug 安装 Firebug 扩展:https://addons. ...

  10. js系列之js简介

    该系列教程都来源于:廖雪峰老师的博客 JavaScript是世界上最流行的脚本语言,因为你在电脑.手机.平板上浏览的所有的网页,以及无数基于HTML5的手机App,交互逻辑都是由JavaScript驱 ...