方式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. asp.net swagger的使用

    最近要从其他系统获取一些数据,准备写个接口让别人把数据塞进来,顺便学习一下如何使用Swagger. 参考大神的教程:asp.net  https://mp.weixin.qq.com/s/SHNNQo ...

  2. Blazor Hybrid / MAUI 简介和实战

    1. Blazor Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架: 使用 C# 代替 JavaScript 来创建信息丰富的交互式 UI. 共享使用 .NET 编写的服务 ...

  3. 图文详解 HDFS 的工作机制及其原理

    大家好,我是大D. 今天开始给大家分享关于大数据入门技术栈--Hadoop的学习内容. 初识 Hadoop 为了解决大数据中海量数据的存储与计算问题,Hadoop 提供了一套分布式系统基础架构,核心内 ...

  4. Spring Security之简单举例

    核心功能 Spring Security提供了三个核心的功能: 认证(你是谁) 授权(你能干什么) 攻击防护(防止伪造身份) 一个简单例子 默认情况 在前面的开发中,都是将spring securit ...

  5. 详解TCP三次握手（建立TCP连接过程）

    在讲述TCP三次握手,即建立TCP连接的过程之前,需要先介绍一下TCP协议的包结构. 这里只对涉及到三次握手过程的字段做解释 (1) 序号(Sequence number) 我们通过 TCP 协议将数 ...

  6. 上半年最中意的 GitHub 更新「GitHub 热点速览 v.22.21」

    2022 年的热点速览加入 GitHub 产品动态之后,这次的图片显示是最得我意的,因为可以提升图片查看人的看片体验.而 GitHub 社区方面,GitHub 官方发布了部分开源项目的新版本.与此同时 ...

  7. python之部分内置函数与迭代器与异常处理

    目录 常见内置函数(部分) 可迭代对象 迭代器对象 for循环内部原理 异常处理 异常信息的组成部分 异常的分类 异常处理实操 异常处理的其他操作 for循环本质 迭代取值与索引取值的区别 常见内置函 ...

  8. python中f'{}'用法

    python3.6增加的方法,字符串定义以f开头,可以使用{}包裹变量,方便字符串的定义. 有些时候很懒,碰到写的比较清晰的就直接搬运:https://blog.csdn.net/weixin_387 ...

  9. Dev C++编写C/C++程序 出现[Error] ld returned 1 exit status报错分析及解决

    debug系列第一弹,不知道大家写程序的时候是不是都遇到过如题的报错. 我本人是经常遇到这行熟悉的令人不知所措的报错,可能是我太笨了 有时候百度无果也差不到原因,那就汇总一下目前我遇到的情况吧--持续 ...

  10. JS：&&运算符

    &&逻辑运算符 当&&连接语句时,两边的语句会转化为布尔类型 1.两边条件都为true时,结果才为true: 2.如果有一个为false,结果就为false: 3.当第 ...