不写<!DOCTYPE html>后父元素未设置高度，子元素height:100%时，继承祖先元素高度
站长
· 阅读数 3
一、父元素未设置高度，子元素height:100%却拥有祖先的高度
1、问题描述
在排查内容超出容器后，滚动轴不出现但能进行滚动的问题时，发现在下面这个结构中，背景为red的div居然持有200px的高度（在实际问题中，相当于滚动内容的父容器；height:100%是平台封装样式，不能随意修改）。 如下图所示：由于父容器没有设置高度，而高度不会默认继承，所以red的高度也应该为0px。
<div style="height: 200px; background: pink;">
<div>
<div>
<div style="height: 100%; background: red"></div>
</div>
</div>
</div>
而正常情况下，应该呈现的效果为
2、初见端倪
- 开始一度以为是样式问题，故而一直盯着仅有的样式查看，属实排查不出来。并且在网上也没有查到类似问题，由于其他类似结构是正常的，于是开始在控制台对比多个相同结构html源文件。
- 最后发现异常页面是由一个temp.html通过请求获取需要展示的html后，使用document.write方法写入的。而temp.html仅包含一个script标签:
<script>document.write('target html structure')<script>
document.write将目标html结构插入temp.html，最终会将上述script标签保留在结构中。
本以为是script标签阻塞样式加载的问题，在后面的测试中发现原来是<!DOCTYPE html>原因。
3、反思与总结
众所周知，“是为了向浏览器表明当前文档应该使用html5标准来解析”。 如果不写，或者少写都会导致浏览器以其他标准解析文档。 这也就是此次问题的根本原因。
归根结底，还是基础不牢，规则意识不强。
二、一点document.write的总结
说实话，document.write一直让我很疑惑。查资料，大家都说他会清空已打开文档的全部内容。那么打开这一词用什么代码去区别呢？
相比之下，MDN确实更显专业一些，说他会在已完成加载的文档调用时，清空所有内容。
加载一词很熟悉，让我想到了window.onload方法：它在文档资源加载完毕后使用。事实证明确实如此，将write放在onload中执行就会替换当前文档内容。