css中div盒子height:100%高度无效解决办法
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
需要分成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%依旧无效 */
}只要经过一定的实践，我们都会发现对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值！但是，怕是很少有人思考过这样一个问题：为何父级没有具体高度值的时候，height:100%会无效？
真实的原因是：如果包含块（即父元素）的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto（这是计算值，是指渲染之后解释的值，并不是我们设置height: auto所指的值）。一句话总结就是：因为解释成了 auto。要知道，auto 和百分比计算，肯定是算不了的：
'auto' * 100/100 = NaN
此时，他们的计算结果是NaN,这就是父元素没有设置高度时，子元素高度百分比不生效的原因了。
到此这篇关于css中div盒子height:100%高度无效解决办法的文章就介绍到这了,更多相关css height:100%高度无效内容请搜索程序员之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持程序员之家！
相关文章
CSS中height:100vh和height:100%的区别
本文主要介绍了CSS中height:100vh和height:100%的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2023-04-06
这篇文章主要介绍了为什么你写的height:100%不起作用？这个知识不算冷门的，但是用的时候可能还是会有些懵逼，下面小编就详细介绍一下2021-05-10
CSS设置盒子容器(div)高度(height)始终为100%
这篇文章主要介绍了CSS设置盒子容器(div)高度(height)始终为100%,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小2020-07-14深入理解CSS的height:100%和height:inherit之间的使用区别
这篇文章主要介绍了深入理解CSS的height:100%和height:inherit之间的使用区别,作者给出了页面设计时的实际示例对比,需要的朋友可以参考下2015-06-08
最新评论