使用 <!DOCTYPE> 时，“高度 = 100%”在 html 中不起作用？答案

【问题标题】："Height=100%" is not working in html when using <!DOCTYPE>?使用 <!DOCTYPE> 时，“高度 = 100%”在 html 中不起作用？
【发布时间】：2018-02-08 12:24:56
【问题描述】：

当我使用不带DOCTYPE 的HTML 时，我的HTML 页面Height=100% 可以正常工作。

但是当我使用DOCTYPE 时，高度无法正常工作...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="11" height ="100%">
    <tr>
        <td height="100%" bgcolor="#008000">&nbsp;</td>
    </tr>
</table>

</body>

如何解决这个问题？

【问题讨论】：

这里对 DOCTYPE 问题做一个简单明了的解释：stackoverflow.com/a/32215263/3597276

标签： html

【解决方案1】：

添加DOCTYPE 会将您从quirks mode 切换到标准模式。在标准模式下，html 和 body 元素不默认为视口（浏览器窗口）大小的 100%；相反，它们只是容纳孩子所需的大小。 table 高度为 100% 表示包含元素的 100%，但这只是包含表内容所需的大小。 Quirks 模式是对旧浏览器行为的模拟，其中html 和body 元素填充了视口。

要解决此问题，您只需将其添加到您的文档中：

<style>
  html, body { height: 100% }
</style>

【讨论】：

我像上面一样尝试，但宽度（100%）工作但高度不工作
您可以使用您正在尝试的确切代码以及它在哪个浏览器上失败来编辑您的帖子吗？
我在 Firefox 中测试过，结果还可以。谢谢@Brian Campbell
我刚刚阅读了这个 11 岁的答案，它让我走上了解决我非常令人沮丧的问题的正确轨道。我还需要在一些
css 类中添加“height: 100%”。谢谢！

【解决方案2】：

当您声明“身高=100%”时，您必须思考“100% 是什么？”。它是该表元素的父元素，即主体。但是身体有多高？

要做你想做的事，在 CSS 中添加： html,body{height:100%}

【讨论】：

【解决方案3】：

正如大家所说，解决方案的主要部分是把

html, body{'height=100%'}

但将每个祖先的高度设置为 100% 也很重要。例如，如果您的代码如下

<body>
    <div id="firstdiv">
         <div id="scnddiv">
               lets say this is the div you want to make 100%
         </div>
    </div>
</body>

如果#scnddiv 是你想要100% 的div，你不仅要让html 和body 100%，还要#firstdiv。所以它看起来像这样

html, body, #firstdiv {height:100%}

然后您可以将该 div 中的任何内容设为 100%。

我希望这会有所帮助。

【讨论】：