方式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. logging、openpyxl、第三方模块下载

    ### 日志模块的组成部分 ```pythonimport logging# 1.logger对象:产生日志logger = logging.getLogger('转账记录')# 2.filter对象 ...

  2. 如何使用Python实现图像融合及加法运算？

    摘要:本篇文章主要讲解Python调用OpenCV实现图像融合及加法运算,包括三部分知识:图像融合.图像加法运算.图像类型转换. 本文分享自华为云社区<[Python图像处理] 五.图像融合.加 ...

  3. 『忘了再学』Shell基础 — 13、环境变量（一）

    目录 1.用户自定义的环境变量 (1)环境变量设置 (2)查询自定义环境变量 (3)删除自定义环境变量 2.系统自带的环境变量--PATH环境变量 (1)PATH环境变量 (2)PATH环境变量的作用 ...

  4. Slab 分配器

    1.什么是Slab 分配器: 以下摘自维基百科:https://en.wikipedia.org/wiki/Slab_allocation Slab  firstly introduced in ke ...

  5. 安装Speedtest到Python

    Speedtest模块可以测试主机的网络带宽大小. 运行环境 系统版本:CentOS Linux release 7.3.1611 (Core) 软件版本:无 硬件要求:无 安装过程 1.安装Spee ...

  6. Linux版 MySql57安装教程

    这里介绍的是CentOS7.4安装mysql57的教程 创建MySQL文件包 使用mkdir -p 文件夹路径创建以下目录: 文件夹路径 用途 /usr/local/mysql MySQL安装路径 / ...

  7. Vue项目中的接口进阶使用

    创建services文件夹 1.文件夹apis.index.request的三个文件. 2.apis文件放接口 export const apis = { checkDeviceNo: '/api/c ...

  8. Pycharm连接远程服务器并保持文件夹同步

    pycharm版本2021 服务器版本 Ubuntu 18 1.连接远程服务器 xxx这部省略了,因为之前就已经连接上了hh,后面用到再补充. 2.保持文件夹同步 1.首先在本地(windows环境创 ...

  9. mysql刷题笔记

    近期,为提升自己的工程能力,在休息时常通过刷题来回顾一下基础性知识. 于是选择了牛客网上的mysql知识题库练手,过程中,主要遇到了几个比较有意思的题,记录下来,方便回顾. 题1:SQL29 计算用户 ...

  10. Python使用EasyOCR库对行程码图片进行OCR文字识别介绍与实践

    关注「WeiyiGeek」点我,点我 设为「特别关注」,每天带你在B站玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 文章目录 0x00 ...