在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. 【CTF】某xss练手小游戏

    http://test.xss.tv 1.http://47.94.13.75/test/level1.php?name=test 直接插入即可,如: http://47.94.13.75/test/ ...

  2. [V1-Team] WEDO创意论坛功能规格说明书

    项目功能规格说明书 版本说明 版本 内容 时间 V1.0 描述总体目标,用户使用场景,界面原型.功能设计及验收 2019.3.28 附Github仓库:WEDO 正文 1.目标 规范指导整个项目设计与 ...

  3. 问题记录——java.lang.IllegalArgumentException: Illegal character in scheme name at index 0

    以下http请求报错是因为,请求的地址前面有个空格.... 2019-01-09 03:30:23,154 ERROR [business.modules.merchantreportresult.s ...

  4. oracle 基础知识(十五)----高水位线

    一,oracle的逻辑存储管理 ORACLE的逻辑存储管理,分4个粒度:表空间,段,区和块. ## 块 粒度最小的存储单位,现在标准的块大小是8K,ORACLE每一次I/O操作也是按块来操作的,也就是 ...

  5. Jenkins+Postman+Newma+Xmysql之API全自动化测试

    第一章 前期准备:各种安装配置介绍 ①Postman安装及使用 ②Newman 安装及使用 ③Xmysql 安装及使用 ④Jenkins安装及配置 1.postman 安装及使用 1.1.postma ...

  6. php高手干货【必看】

    1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数&quo ...

  7. js 获取时间相关

    $(document).ready(function () {            var date = new Date();            var sb = "";  ...

  8. J2EE课程设计：在线书店管理系统

    1.系统实现 使用SpringMVC框架进行开发 使用Maven进行系统构建 使用MySql数据库 项目只实现了查看图书,搜索图书,加入购物车,创建订单,图书管理等基本功能 前台使用Bootstrap ...

  9. python数据处理

    1.数据清洗 1.1 数据格式化 数据格式化是数据清洗常见的形式之一,就是将可读性差的或无法阅读的数据转换成可读性较强的数据格式. python对字符串和数字都有格式化的方法,如%s, %d分别代表格 ...

  10. Jms学习篇一：JMS介绍

    1.JMS介绍: JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API JMS是一种与厂商无关的 API,用来访问 ...