不写<!DOCTYPE html>后父元素未设置高度，子元素height:100%时，继承祖先元素高度

用户56037042871252024-02-04 15:45

一、父元素未设置高度，子元素height:100%却拥有祖先的高度

1、问题描述

在排查内容超出容器后，滚动轴不出现但能进行滚动的问题时，发现在下面这个结构中，背景为red的div居然持有200px的高度 （在实际问题中，相当于滚动内容的父容器；height:100%是平台封装样式，不能随意修改）。

如下图所示：由于父容器没有设置高度，而高度不会默认继承，所以red的高度也应该为0px。

css 复制代码

<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标签:

temp.html 复制代码

<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中执行就会替换当前文档内容。