在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. Shiro登录的故事

    从前,有一个subject,他有一个UsernamePasswordToken的实例,也就是token: 他准备登录,于是调用subject.login(AuthenticationToken tok ...

  2. 前端性能优化之优化图片 && 优化显示图片

    前端图片优化一直以来都是热门话题,从需求上来看,很多站点往往是图片体积大于代码体积, 图片请求多余代码文件请求, 给前端的性能带来了很大的困扰,那么应该如何解决呢? 零. 认识图片 我们通常使用的图片 ...

  3. MongoDB数据库进阶 --- 增删查改...

    注意: monogdb数据在使用之后必须及时 mongodb.close()否则后台崩溃. 在之前的文章中,我已经介绍了什么事MongoDB以及怎么在windows下安装MongoDB等等基本知识. ...

  4. kpw2使用心得

    一:截屏 只需要同时按下对角线的两个点(比如左下角,右上角)就可以,图片可以通过数据线连接到电脑,在根目录下就可以查看截屏图片. 二:拖曳电子书pdf 可以通过数据线连接,找到kpw2的磁盘,将pdf ...

  5. 网站加入QQ聊天链接

    有时候我们的网站需要加入客服聊天功能,实现方式各不相同同,对于流量不大的网站,可以加入qq聊天的链接,点击链接,会打开本地qq的聊天窗口, 和指定的人会话.实现方式很简单,就是一个<a>标 ...

  6. Whu 1604——Play Apple——————【博弈】

    Problem 1604 - Play Apple Time Limit: 1000MS   Memory Limit: 65536KB   Total Submit: 442  Accepted: ...

  7. Whu 1603——Minimum Sum——————【单个元素贡献、滑窗】

    Problem 1603 - Minimum Sum Time Limit: 2000MS   Memory Limit: 65536KB   Total Submit: 623  Accepted: ...

  8. js 添加HTML属性的方法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. js数组与字符串相互转换

    一.数组转字符串(将数组元素用某个字符连接成字符串) var a, b;a = new Array(0,1,2,3,4);b = a.join("-"); 二.字符串转数组(将字符 ...

  10. 01.里氏准换与using关键字

    using关键字有什么用?什么是IDisposable? using可以声明namespace的引入,还可以实现非托管资源的释放,实现了IDisposiable的类在using中创建,using结束后 ...