方式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. NMS技术总结（NMS原理、多类别NMS、NMS的缺陷、NMS的改进思路、各种NMS方法）

    ​  前言  本文介绍了NMS的应用场合.基本原理.多类别NMS方法和实践代码.NMS的缺陷和改进思路.介绍了改进NMS的几种常用方法.提供了其它不常用的方法的链接. 本文很早以前发过,有个读者评论说 ...

  2. .NET混合开发解决方案13 自定义WebView2中的上下文菜单

    系列目录     [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...

  3. 通过有序线性结构构造AVL树

    通过有序线性结构构造AVL树 本博客旨在结局利用有序数组和有序链表构造平衡二叉树(下文使用AVL树代指)问题. 直接通过旋转来构造AVL树似乎是一个不错的选择,但是稍加分析就会发现,这样平白无故做了许 ...

  4. 11┃音视频直播系统之 WebRTC 进行文本聊天并实时传输文件

    一.RTCDataChannel WebRTC 不但可以让你进行音视频通话,而且还可以用它传输普通的二进制数据,比如说可以利用它实现文本聊天.文件的传输等 WebRTC 的数据通道(RTCDataCh ...

  5. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  6. js算法-埃筛法

  7. [2-SAT]编码

    题意:给n个01字符串,每个最多包含1个'?',能否构造出满足两两不存在一个是另一个前缀的方案. 思路: 2-SAT+trie树优化建图 把每个字符串拆成i,i+n,如果不存在'?',就硬搞出两种情况 ...

  8. “摆地摊“都找不到全栈工程师？JNPF帮你分分钟搞定！

    大街上捕捉野生程序员 都这样了还找不到全栈工程师 全栈工程师(Full-Stack Engineer)图鉴: 全栈工程师,也叫全端工程师(同时具备前端和后台能力),英文Full Stack  deve ...

  9. python基础学习10

    python基础学习 内容概要 文件内光标的移动 文件数据修改 函数简介 函数语法结构 内容详情 文件内光标的移动 with open(r'路径','r',encoding='utf8') as f: ...

  10. Vue回炉重造之图片加载性能优化

    前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...