【css】div盒子height:100%高度无效解决办法

需要分成 2 种情况来看待

一、flex 布局情况下

1、在 父元素设置一个固定 px 高度 例如 height: 500px
2、在 子元素设置 height: auto

那么为什么 height: 100% 不生效呢？
原因是 flex 布局也是自适应的，他的单位默认是 auto 和百分比无法计算得出一个合理值，因此高度设置 height: 100% 失效了。

'auto' * 100/100 = NaN 

二、非 flex 布局情况下

对于 height 属性，如果父元素 height 为 auto，只要子元素在文档流中（即 position 不等于 fixed 或者 absolute），其百分比值完全就被忽略了。这是什么意思呢？首先来看个例子，比如，某小白想要在页面插入一个 div 标签，希望满屏显示黑色背景，就写了如下代码：

!DOCTYPE html>
html lang="en">
head>
  title>黑色主题/title>
  style>
    .box {
      width: 100%; 
      height: 100%; 
      background: #000;
    }
  /style>
/head>
body>
  div class="box">/div>
/body>
/html>

然后他发现这个 div 高度永远是 0，哪怕其父级 body 塞满了内容也是如此。事实上，他需要加上这样的设置才行：

html, body {
 height: 100%;
}

并且仅仅设置 body 没有设置 html 也是不行的，因为此时的 body 也没有具体的高度值：

body {
 
}

只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值！但是，怕是很少有人思考过这样一个问题：为何父级没有具体高度值的时候，height:100% 会无效？

真实的原因是：如果包含块（即父元素）的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为 auto（这是计算值，是指渲染之后解释的值，并不是我们设置 height: auto 所指的值）。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的：

'auto' * 100/100 = NaN 

此时，他们的计算结果是 NaN, 这就是父元素没有设置高度时，子元素高度百分比不生效的原因了。