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

相关推荐
独立开阀者_FwtCoder6 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
Cacciatore->16 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~18 分钟前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo19 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
ac.char30 分钟前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
贵沫末38 分钟前
React——基础
前端·react.js·前端框架
每天开心42 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry1 小时前
uniapp三步完成一维码的生成
前端·vue.js
Rubin931 小时前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子1 小时前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js