方式1，使用flex

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            padding: 0;

            margin: 0;

            /* height: 2400px; */

            height: 100%;

            background: lightgray;

        }

        .body {

            display: flex;

            background: yellow;

            box-sizing: border-box;

            min-height: 600px;

            padding: 10px;

        }

        .child {

            flex-basis: 100px;

        }

        .childchild {

            height: 100%;

            background: red;

        }

    </style>

</head>

<body>

    <div class="body">

        <div class="child">

            <div class="childchild"></div>

        </div>

    </div>

</body>

</html>

这种方式若childchild高度超过child，会撑开child元素，若想childchild的高度不撑开child，用下面的方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            padding: 0;

            margin: 0;

            /* height: 2400px; */

            height: 100%;

            background: lightgray;

        }

        .body {

            display: flex;

            background: yellow;

            box-sizing: border-box;

            min-height: 600px;

            padding: 10px;

            flex-direction: column;

        }

        .child {

            flex-basis: 100px;

            flex-grow: 1;

            height: 0;

        }

        .childchild {

            height: 800px;

            background: red;

        }

    </style>

</head>

<body>

    <div class="body">

        <div class="child">

            <div class="childchild"></div>

        </div>

    </div>

</body>

</html>

方式2，使用grid

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        html, body {

            padding: 0;

            margin: 0;

            /* height: 2400px; */

            height: 100%;

            background: lightgray;

        }

        .body {

            display: grid;

            min-height: 600px;

            background: yellow;

            padding: 10px;

        }

        .child {

          height: 100%;

          background: red;

        }

    </style>

</head>

<body>

    <div class="body">

        <div class="child">

        </div>

    </div>

</body>

</html>

这种方式child也会撑开body

使min-height子元素height百分比生效的2种方式的更多相关文章

  1. 小程序scroll-view组件使用时，子元素虽设置样式display:inline-flex;whit-space:nowrap

    小程序scroll-view组件使用时,子元素虽设置样式display:inline-flex;whit-space:nowrap

  2. Java 数组元素逆序Reverse的三种方式

    Java 数组元素逆序Reverse的三种方式   本文链接:https://blog.csdn.net/xHibiki/article/details/82930521 题目 代码实现 说明 int ...

  3. 使flex-direction: column的子元素height: 100%生效的办法

    在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...

  4. HTML技巧篇：实现元素水平与垂直居中的几种方式

    如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题. 1)单行文本的居中 主要实现css代码: 水平居中:text-align:center;垂直居中:l ...

  5. html,将元素水平，垂直居中的四种方式

    将元素垂直,水平居中分两种情况:一个是元素尺寸固定,二是元素尺寸不固定 一.尺寸固定 方法1:定位 ,50%,margin负距 .box{ width: 400px; height: 300px; b ...

  6. React-Native子组件修改父组件的几种方式，兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  7. vuejs 子组件传递父组件的第二种方式

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

  8. vuejs 子组件传递父组件的第一种方式

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

  9. Android：在子线程中更新UI的三种方式

    ①使用Activity中的runOnUiThread(Runnable) ②使用Handler中的post(Runnable) 在创建Handler对象时,必须先通过Context的getMainLo ...

随机推荐

  1. 精华！一张图进阶 RocketMQ

    前 言 大家好,我是三此君,一个在自我救赎之路上的非典型程序员. "一张图"系列旨在通过"一张图"系统性的解析一个板块的知识点: 三此君向来不喜欢零零散散的知识 ...

  2. K8S面试应知必回

    目录 面试不要不懂装懂,不会就是不会,不可能每个人都接触过所有的知识! 1. 基础问题 1.1 Service是怎么关联Pod的?(课程Service章节) 1.2 HPA V1 V2的区别 1.3 ...

  3. React 与 Hooks 如何使用 TypeScript 书写类型？

    React 与 Hooks 如何使用 TypeScript 书写类型? 本文写于 2020 年 9 月 20 日 函数组件与 TS 对于 Hooks 来说是不支持使用 class 组件的. 如何在函数 ...

  4. unity---世界坐标和本地坐标的转换

    会受到缩放的影响 用的比较多的是 本地坐标转换为世界坐标,比如在自己周围释放物体 当物体发生旋转,方向会发生变化

  5. 为什么Java有了synchronized之后还造了Lock锁这个轮子？

    众所周知,synchronized和Lock锁是java并发变成中两大利器,可以用来解决线程安全的问题.但是为什么Java有了synchronized之后还是提供了Lock接口这个api,难道仅仅只是 ...

  6. 20212115 实验三 《python程序设计》实验报告

    实验报告 20212115<python程序设计>实验三报告 课程:<Python程序设计>班级: 2121姓名: 朱时鸿学号:20212115实验教师:王志强老师实验日期:2 ...

  7. MTK 虚拟 sensor bring up (pick up) sensor1.0

    pick up bring up sensor1.0 1.pick up对比 2.SCP 1.添加驱动文件 2.添加编译环境(打开开关) 注:编译过程中如果显示内存不够 3.修改底层数据上报方式 3. ...

  8. 【原创】项目四Tr0ll-1

    实战流程 1.nmap枚举 nmap -sP 192.168.186.0/24 nmap -p- 192.168.186.142 nmap 192.168.186.142 -p- -sS -sV -A ...

  9. MyBatis - MyBatis的层次结构

    API接口层 规定了一系列接口,能够向外提供接口,对内进行操作. 数据处理层 负责SQL相关处理工作,如:SQL查找.SQL执行.SQL映射等工作. 基础支撑层 提供基础功能支撑,包括连接管理.事务管 ...

  10. C语言- 基础数据结构和算法 - 栈的顺序存储

    听黑马程序员教程<基础数据结构和算法 (C版本)>, 照着老师所讲抄的, 视频地址https://www.bilibili.com/video/BV1vE411f7Jh?p=1 喜欢的朋友 ...