为什么删除DOCTYPE时高度100%有效?

问题描述 投票:21回答:5

这是完整的代码:

<!DOCTYPE HTML>
<html>
<body style="height: 100%; padding: 0; margin: 0;">
    <div style="background-color: green; height: 100%; width: 100%"></div>
</body>
</html>

没有任何显示。但是,如果我删除第一行(doctype),则所有页面都按预期是绿色。

我有两个问题:

  1. 如何使div填充页面而不删除该标签?
  2. 为什么删除doctype使其起作用?
css html doctype quirks-mode
5个回答
47
投票

CSS height属性,百分比值和DOCTYPE

其他人多次回答了您的问题[<< [第一部分,该问题询问如何对您的div应用100%的高度。本质上,在根元素上声明高度:

html { height: 100%; } 可以在这里找到完整的说明:

Working with the CSS height property and percentage values

    问题的[[受到的关注要少得多。我会尽力回答。

  • 为什么删除height会使[绿色背景]起作用?

    当您删除DOCTYPE(doctype)时,浏览器从
    标准模式
    切换为

    快速模式。

    document type declaration中,也称为quirks mode,浏览器模拟了一个旧的浏览器,因此它可以解析旧的网页-在Web标准问世之前创作的页面。处于怪癖模式的浏览器假装为compatibility modeIE4,因此它可以按作者预期的方式呈现旧代码。

    IE5 and Navigator 4如何定义怪癖模式:

    [在计算中,怪癖模式是指某些网络使用的技术浏览器,以保持与Web的向后兼容性专为旧版浏览器设计的页面,而不是严格遵守标准模式下的W3C和IETF标准。

    Wikipedia的拍摄:

    [在网络的过去,页面通常以两部分的形式编写版本:一个用于Netscape Navigator,一个用于Microsoft Internet资源管理器。在W3C制定Web标准时,浏览器无法刚开始使用它们,因为这样做会破坏网站上大多数现有的网站网络。因此,浏览器引入了两种模式来处理新符合标准的网站与旧的旧网站有所不同。

    现在,这是代码中的MDN在怪癖模式下而不在标准模式下工作的特定原因:

    height: 100%中,如果父元素具有standards mode(未定义高度),则子元素的百分比高度也将被视为height: autoheight: auto)。

    这就是为什么第一个问题的答案是as per the spec

    要使html { height: 100%; }height: 100%中工作,必须在父元素(div)上设置height但是,在怪异模式下,如果父元素具有more details,则子元素的百分比高度将被测量

    相对于视口

    以下是涉及此行为的三个参考资料:

    height: auto

  • https://www.cs.tut.fi/~jkorpela/quirks-mode.html

    https://stackoverflow.com/a/1966377/3597276


9
投票
请参见此处以获取工作示例:

html, body { height:100%; }

如此处其他人所述,一旦删除第一行(HTML5 doctype),浏览器将以不同的方式呈现页面,在这种情况下,不必将HTML标记的显式高度设置为100 %。


5
投票

您还必须将html { height:100%; } <html>标签的宽度和高度设置为100%,因为当您将<body>的宽度和高度分配为100%时,这意味着您正在为其分配其父元素的完整宽度和高度,在这种情况下,<div>的父元素为<div><body>的父元素为<body>

为什么我删除<html>标签时起作用?

由于删除了<!DOCTYPE html>标签,浏览器以不同的方式呈现页面,显示其他结果。

您需要将html和body标签的高度设置为100%才能填充页面。

css:

<!DOCTYPE html>

5
投票
为什么我删除<html>标签时起作用?

由于删除了<!DOCTYPE html>标签,浏览器以不同的方式呈现页面,显示其他结果。


2
投票
© www.soinside.com 2019 - 2024. All rights reserved.