首页猿问为什么我的div高度100%只有当...

为什么我的div高度100%只有当DOCTYPE被移除时才能工作？

Html5 Html/CSS

偶然的你 2019-07-08 13:00:32

为什么我的div高度100%只有当DOCTYPE被移除时才能工作？这是整个代码：<!DOCTYPE HTML><html><body style="height: 100%; padding: 0; margin: 0;"> <div style="background-color: green; height: 100%; width: 100%"></div></body></html>什么都没有出现。但是如果删除第一行(doctype)，所有页面都如预期的那样是绿色的。我有两个问题：我该怎么做div填充页面而不删除标签？为什么要删除doctype让它起作用？

查看完整描述

3 回答

智慧大石

TA贡献1946条经验获得超3个赞

CSS`height`属性、百分比值和DOCTYPE

这个第一部分你的问题是如何将100%的高度应用到你的div已经被其他人多次回答了。基本上，在根元素上声明一个高度：

html { height: 100%; }

在这里可以找到一个完整的解释：

使用CSSheight财产和百分比值.

这个第二部分你的问题得到的关注要少得多。我会试着回答这个问题。

为什么要删除doctype使[绿色背景]发挥作用？

当您移除DOCTYPE时(文档类型声明)浏览器从标准模式到怪癖模式.

在……里面怪癖模式，也称为兼容模式，浏览器模拟一个旧的浏览器，这样它就可以解析旧的网页-在Web标准出现之前编写的页面。在古怪模式下的浏览器假装是IE4, IE5和Navigator 4因此，它可以按照作者的意图呈现旧代码。

以下是如何维基百科定义怪癖模式：

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

这是MDN采取：

在过去的Web时代，页面通常有两个版本：一个用于Netscape Navigator，另一个用于MicrosoftInternetExplorer。当Web标准是由W3C制定的，浏览器不能仅仅开始使用它们，因为这样做会破坏网络上大多数现有的站点。因此，浏览器引入了两种模式来处理与旧版本站点不同的符合标准的新站点。

现在，以下是为什么height: 100%在您的代码中，工作模式是奇怪的，而不是标准模式：

在……里面标准模式，如果父元素具有height: auto(未定义高度)，则子元素的百分比高度也将被视为height: auto (按照规范).

这就是为什么你第一个问题的答案是html { height: 100%; }.

为height: 100%在你的div，您必须设置height关于父元素(更多细节).

但是，如果父元素具有height: auto，然后测量子元素的百分比高度。相对于视口.

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

TL；DR

简而言之，开发人员需要知道的是：

古怪模式下的浏览器会以一种不可预测、不可靠和通常不受欢迎的方式呈现网页。所以总是包括一个DOCTYPE对于要呈现的文档标准模式.
选择正确的DOCTYPE过去是一个模棱两可和有点混乱的过程。许多DOCTYPE版本可供选择..但今天，这个过程和以往一样简单。只需使用：
<!DOCTYPE html>

反对回复 2019-07-08

qq_遁去的一_1

TA贡献1725条经验获得超7个赞

对于HTML 5文档类型，还需要设置html元素的高度：

html {
    height:100%;}

反对回复 2019-07-08

3 回答
0 关注
437 浏览

关注

为什么我的div高度100%只有当DOCTYPE被移除时才能工作？

为什么我的div高度100%只有当DOCTYPE被移除时才能工作？

3 回答

CSS`height`属性、百分比值和DOCTYPE

TL；DR

相关问题推荐

添加回答

热搜

最近搜索清空

为什么我的div高度100%只有当DOCTYPE被移除时才能工作？

为什么我的div高度100%只有当DOCTYPE被移除时才能工作？

3 回答

CSSheight属性、百分比值和DOCTYPE

TL；DR

相关问题推荐

添加回答

CSS`height`属性、百分比值和DOCTYPE