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

一、父元素未设置高度,子元素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中执行就会替换当前文档内容。

相关推荐
Felicity_Gao3 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货4 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~5 小时前
前端三剑客之一 HTML~
前端·html
lang201509285 小时前
Spring远程调用与Web服务全解析
java·前端·spring
listhi5207 小时前
利用React Hooks简化状态管理
前端·javascript·react.js
一点一木8 小时前
🚀 2025 年 10 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
华仔啊8 小时前
这个Vue3旋转菜单组件让项目颜值提升200%!支持多种主题,拿来即用
前端·javascript·css
非凡ghost8 小时前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns9 小时前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年9 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化