参考：

http://www.webhek.com/post/css-100-percent-height.html

https://www.cnblogs.com/kunmomo/p/10600662.html

https://www.cnblogs.com/kunmomo/p/10601289.html

https://www.cnblogs.com/trccc9/p/9830820.html 解决方法：给父元素加绝对定位，然后子元素加相对定位，这样子元素的高度就会根据父元素的高度进行计算【可以尝试下】

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

那为什么 height:100%; 不起作用

当设计一个页面时，你在里面放置了一个div元素，你希望它占满整个窗口高度，最自然的做法，你会给这个div添加height: 100%;的css属性。然而，如果你要是设置宽度为width: 100%;，那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗？

错。

为了理解为什么不会，你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值，那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式完全不一样。事实上，浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。

因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。

上面的演示例子是父元素没有设定固定高度，于是子元素的高度height: 100% 也不会起作用。你可以根据父元素的背景色来判断子元素的高度不是100%。

那么，如果想让一个元素的百分比高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。换句话说，你需要这样做：

<html>

  <body>

    <div style="height: 100%;">

      <p>

        想让这个div高度为 100% 。

      </p>

    </div>

  </body>

</html>

现在你给了这个div的高度为100%，它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用，你必须设定<body>和<html>的高度。

<html style="height: 100%;">

  <body style="height: 100%;">

    <div style="height: 100%;">

      <p>

        这样这个div的高度就会100%了

      </p>

    </div>

  </body>

</html>

从这个演示中你可以看出，height: 100%;起作用了。

在使用height: 100%;时需要注意的一些事项

1、Margins 和 padding 会让你的页面出现滚动条，也许这是你不希望的。

2、如果你的元素实际高度大于你设定的百分比高度，那元素的高度会自动扩展。

父元素高度设置为min-height，子元素高度设置为100%，但实际上子元素高度你知道是多少吗？

前言

给父元素一个min-height，子元素设置height:100%。

代码

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style type="text/css">

    #div1{width: 100%;min-height: 50px;background-color: yellow;}

    #sp1{width: 20%;height: 100%;display: inline-block;background-color: blue;}

    #sp2{width: 50%;height: 100%;display: inline-block;background-color: red;}

    </style>

</head>

<body>

<div id="div1">

    <span id="sp1">aaa</span>

    <spanv id="sp2">bbb</span>

</div>

</body>

</html>

结果

发现子元素高度并没有撑开，如下图：

如果我们稍作改变，将父元素的min-height改为height，子元素高度就会撑开，如下图：

剖析

min-height表示盒子的最小高度，并不表示盒子的最终高度，站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。
在外部盒子等待内部元素计算出高度时并不知道自己的高度，内部盒子高度相对外部盒子设置高度时也未知外部高度，所以按照自己的内容的情况渲染了，最终的效果就是内部盒子高度与外部无关。

结论

子元素的 height 或是 min-height 百分比是否生效，基于父元素是否设置了固定高度或者是一个有效百分比高度。
参考：剖析height百分比和min-height百分比

实际编码经验（可以让子元素和父元素全部都设置为相同的min-height即可）：

<template>

    <div style="display: block;min-height: calc(100vh - 50px)">

      <div style="float:left; width:20%; min-height: calc(100vh - 50px); background-color: wheat;">

        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

        <el-tree

          class="filter-tree"

          :data="data"

          :props="defaultProps"

          :default-expand-all="false"

          :filter-node-method="filterNode"

          ref="tree"

        ></el-tree>

      </div>

      <div style="float:left; width:80%; min-height: calc(100vh - 50px); background-color: gold;"></div>

    </div>

</template>

如何让 height:100%; 起作用---父级元素必须设定高度的更多相关文章

  1. 为什么我们要给父级元素写overflow:hidden

    有这样的一种情况,有的时候,我们的父级元素设置了高度,一般来说,父级元素的高度是根据子元素的高度来自适应撑开的,如果我们的父级元素也设置了高度,那么其高度就不会随着子元素的的大小而自适应,也许有的时候 ...

  2. 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  3. CSS 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  4. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  5. CSS清除浮动使父级元素展开的三个方法

    点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...

  6. 【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

    引言 书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的. padding 属性用于设置元素的内边距,其值可以是lengt ...

  7. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  8. float导致父级元素塌陷的问题

    利用float进行页面布局时常常会出现父级元素没有高度的塌陷问题,如以下代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  9. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

随机推荐

  1. 声源定位之2精读《sound localization based on phase difference enhancement using deep neuarl networks》

    2.1.1 题目与摘要 1.为什么要增强IPD? The phase differences between the discrete Fourier transform (DFT) coeffici ...

  2. VS Code中python代码自动格式化 代码自动检查

    VS Code菜单栏中依次打开 File—Preferences—Settings,搜索框中搜索“python.formatting.provider”, 然后在下拉菜单中选择autopep8,yap ...

  3. Mysql之Incorrect string value: '\xF0\x9F\x98\x89 \xE6... 保存emoji表情

    错误信息如下: Incorrect string value: '\xF0\x9F\x98\x89 \xE6...' 问题产生的原因是字符串不兼容4字节的unicode导致的,一般我们常见的表情编码等 ...

  4. 哈希表查找（散列表查找） c++实现HashMap

    算法思想: 哈希表 什么是哈希表 在前面讨论的各种结构(线性表.树等)中,记录在结构中的相对位置是随机的,和记录的关键字之间不存在确定的关系,因此,在结构中查找记录时需进行一系列和关键字的比较.这一类 ...

  5. Linux下安装java及配置(yum安装)

    1.查看java的所有版本:yum list java* 2.安装免费版1.8: yum install java-1.8.0-openjdk.x86_64 3.配置java环境 JAVA_HOME= ...

  6. sqlite3 数据库表查看步骤

    sqlite3 数据库表查看步骤 1 sqlite3 local.db2 .mode column3 .headers on4 .tables5 select * from tablename6 ;( ...

  7. Jenkins集成TestNG

    1.Jenkins安装插件 TestNG Results Plugin 2. 添加配置 “构建后操作”->“Publish TestNG Results” 保持默认配置即可 3.查看报告 项目构 ...

  8. Jenkins - 分布式构建

    1 - 简介 Jenkins支持分布式多节点(Master-Slave)运行模式. 将安装Jenkins的主机作为Master节点,然后通过界面配置(或远端启动服务)来添加Slave节点. 在这种部署 ...

  9. Datalogic 雕刻机

    选型需要考虑: 1. 材料 2. 材质 3. 内容 4. 范围 选择镜头 5. 厚度 6. 效率 7. 效果 脚本代码: // COM 串口设置 const N_COM = "COM2&qu ...

  10. Android组件化aar躺坑记：ButterKnife 报 元素值必须为常量表达式错误

    背景: 项目有需求,将自己写的模块作为一个module给到大项目使用,所以准备把自己的项目打包成aar包. 一.如何将独立项目打包成aar: 1.修改module下的application 为libr ...