相关疑难解决方法(0)

为什么我的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>

Run Code Online (Sandbox Code Playgroud)

什么也没出现.但是,如果我删除第一行(the doctype),则所有页面都是预期的绿色.

我有两个问题:

如何div在不删除标签的情况下填充页面？
为什么删除doctype它使它工作？

html css html5 doctype quirks-mode

Moh*_*n R

2015 12-28

21
推荐指数

4
解决办法

5360
查看次数

HTML 5 Doctype混乱布局

当我将其检查到W3C Validator时,我的网站几乎完成了100%.收到错误消息称我没有声明Doctype.所以我添加了HTML 5 <!DOCTYPE html>.好的,错误消失了.但为什么布局变得如此混乱？

请在下面查看.
http://itsdaffa.16mb.com/ - >没有Doctype
http://itsdaffa.16mb.com/error.html - > WITH Doctype

我偶然发现了一些关于类似问题的答案但却无法理解,因为大部分都是他们的代码特定的错误.例如,在这个问题中,用户通过删除负值right属性值解决了他的问题,而我的代码中没有任何值.
我是一个完全的初学者,实际上这是我从头开始构建的第一个网站.我迫切需要帮助.谢谢 :)

html css

Daf*_*ama

2017 05-23

5
推荐指数

1
解决办法

1074
查看次数

Doctype中断了flexbox布局

当我在页面顶部添加声明时,我的flexbox布局将崩溃,当我删除doctype时,它按预期工作.chrome/firefox/ie出现问题.

.grid {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  border: 1px solid black;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
}
.cell {
  flex-grow: 1;
  border: 1px solid black;
}

Run Code Online (Sandbox Code Playgroud)

<div class="grid">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

https://plnkr.co/edit/jKklf2zeYBjOgTsSQnvr

应该是什么样的: