背景：
今晚回家本打算好好看书学习，谁知QQ突然响起，同学问我一个CSS问题，二话不说就打开网页查看问题，原本以为是一个简单的问题，谁知第一眼就让我一脸懵逼，接下来就让我们看看问题描述与解决方法吧。
问题：
基本描述：同学所写的是一个移动端页面，然而奇妙的事情发生了，页面底部突然多处将近两倍的距离，如图：
H5的空白区域问题
看到这个问题第一眼就认为是body的高度设置问题嘛，于是我打开了开发者工具查看，然后结果却出乎意料😺，如图：
查看chrome开发者工具的结果
可见body元素高度是3234.36，意思是body的高度是正常的，而下面却平白无故的多出了接近3000px的像素而且开发者工具还无法识别出那一块空白区域是哪个元素造成的😢，这样的BUG简直了，找个BUG就像大海捞针。。。
以下是查找过程：
查找过程。。。。。略去，毕竟我们只关心结果和问题的解决方案嘛！😄
问题原因：
经过将近1小时的查找(ps:还好页面元素少😺)，终于找到了问题的所在：
问题样式图
问题样式图
没错就是这么短短的几个样式导致了问题。。。
不明白的同学就跟随我的脚步来Debug吧😄
-----------------------华丽的分割线------------------------
问题分析：
通过上述代码可以看到一个class为adv的元素的高度通过rem和html上的font-size高度计算得到其值为5405px，然后我们现在已知body高度为3234.36px，从数值上看是不是底下的空白就好像是多出了1倍多，那么是不是与这个font-size有关呢？
那么我们接着看这个class为adv的元素是什么样的吧，图：
请无视注释，那是我修改bug的记录
可见该元素是个div元素且内部只有一个img图片，那么问题就来了，这么easy的代码段是如何造成如此匪夷所思的bug的呢？
首先，我们知道font-size是设置字体大小的，但是其实font-size不仅设置了字体大小，还影响行级元素的内容区大小(如果不明白内容区，行内框，行高的请转到此链接),那么从上面的内容就可知，其内部img所占的空间高度大小实则是5405px的区域，于是包含块div的高度就应该自动被撑开,由于行高不仅受内容区英雄，还要加上行间距，因此具体div大小还要由浏览器确定，如下图Demo所示：
//CODE
<!DOCTYPE html>
<html style="font-size: 54.05px;">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body >
<div style="font-size: 100rem; ">
</div>
</body>
</html>
运行截图：
body元素的高度与宽度
从上述图片可以看到div包含块确实是被内部内容撑开了，但是问题中div的高度只有接近一半，并且chrome显示不出是哪个元素导致的空白区域，这个又是如何造成的呢？
我通过比较css样式，得出应该是line-height的问题，于是在div上增加了line-height:0;样式，结果如图：
问题重现了
现有高度
从上图可以看到问题重现了，虽然高度貌似不是减半，但是问题确实得到了重现，由于能力有限暂时无法分析出为何高度变为了1945px(如果由大牛知道具体原因，还望留言解释)，但是问题原因却明确了😄
-----------------------华丽的分割线------------------------
解决思路：
1.在内部内联元素上设置font-size属性，而不在包含块级元素上设置font-size，并且line-height的设置要合理，别设置过小的line-height。
2.设置包含块的overflow:hidden;将超出的部分隐藏。
总结：
在line-height小于内容区时，包含块的底部计算貌似是从基线处开始计算的，而且下方的行间距依旧得到了保留但是在浏览器的工具中无法显示出来。
以上内容包含一些自己的推论，还没有测试以及证实，希望在此留下记录，分享与交流。
行文仓促，如有错误，还望指出。🙏
网友评论