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

    需要分成2种情况来看待

    一、flex布局情况下

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

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

    'auto' * 100/100 = NaN 

    • 1

    二、非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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

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

    html, body {
 height: 100%;
}

    • 1
    • 2
    • 3

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

    body {
 /* 子元素 height:100%依旧无效 */
}

    • 1
    • 2
    • 3

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

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

    'auto' * 100/100 = NaN 

    • 1

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

  • 相关阅读:
    Apache Doris (四十五）： Doris数据更新与删除 - Sequence 列
    DBCO-PEG-DSPE 磷脂-聚乙二醇-二苯并环辛炔用于脂质体制备
    数据分箱（分层）的几种方法
    简单diff算法
    【C语言】手把手带你拿指针疑难杂症
    【操作系统】保姆级教程(VMware)Ubuntu+qemu+xv6安装调试
    Mysql - 索引
    【HCIE】VXLAN
    移动端阻止Touch导致的页面滑动/缩放
    100天精通Python（基础篇）——第22天：判断语句综合案例
  • 原文地址：https://blog.csdn.net/hzxOnlineOk/article/details/128020155