Question

所以我有2个文件divCeption.html和styles.css，代码如下：

＆＃13;

body {
    margin: 0;
}

#d1 {
    background-color: #ff000a;
    height: 100%;
    width: 100%;
}

＆＃13;

<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="styles.css">
    </head>

    <body>
        <div id="d1"></div>
    </body>
</html>

＆＃13;

此代码有效，它可以完成它的操作：在屏幕上显示红色屏幕好的，问题来了，请注意HTML开头缺少的<!doctype html>。如果我将doctype放在HTML的开头，页面就会变成空白......任何人都可以解释一下为什么doctype会给出麻烦吗？

Answer 1

我可以重现你的问题，我已经通过添加

解决了这个问题

html, body {
    height: 100%;
}

到我的CSS代码。

正如所讨论的here，其原因可能是当浏览器处于标准模式时，元素的百分比高度取决于其父级的高度，并且关系上升到{{1元素;您可以通过检查html元素并注意到它不会占用屏幕上的所有空间来自行查看。

甚至比添加上面的CSS行更好，你应该使用CSS reset。

Answer 2

设置

html, body {
    height: 100%;
}

Answer 3

也许您应该尝试设置html和body元素的高度和宽度：

＆＃13;

html, body {
  width: 100%;
  height: 100%;
}

body {
   margin: 0;
}

#d1 {
   background-color: #ff000a;
   height: 100%;
   width: 100%;
}

＆＃13;

<html>
   <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="styles.css">
   </head>
  
   <body>
      <div id="d1"></div>
   </body>
</html>

＆＃13;

HTML wild doctype

3 个答案: