使用时，“Height = 100％”在html中不起作用？

When I use HTML without DOCTYPE, my HTML page Height=100% is working.

当我使用没有DOCTYPE的HTML时，我的HTML页面高度= 100％正在运行。

But when I use DOCTYPE, height is not working correctly...

但是当我使用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>

How to solve this problem?

如何解决这个问题呢？

3 个解决方案

#1

Adding a DOCTYPE switches you from quirks mode to standards mode. In standards mode, the html and body elements do not default to 100% of the size of the viewport (browser window); instead, they are only as large as they need to be to contain their children. The table height of 100% means 100% of the containing element, but that's only as large as it needs to be to contain the contents of the table. Quirks mode is an emulation of the behavior of older browsers, in which the html and body elements filled the viewport.

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

To fix the problem, you just need to add this to your document:

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

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

#2

When you state 'height=100%' you have to think "100% of what?". It's the parent of that table element which is the body. But how tall is the body?

当你说“身高= 100％”时，你必须考虑“100％的什么？”。它是该表元素的父元素。但身体有多高？

To do what you want, add this in the CSS: html,body{height:100%}

要做你想要的，在CSS：html，body {height：100％}中添加它

#3

Like everyone said the main part of the solution is to put

像所有人都说解决方案的主要部分是放

html, body{'height=100%'}

html，body {'height = 100％'}

But its also really important to set every single ancestor's height to be 100%. for example if your code is as follows

但将每个祖先的高度设定为100％也非常重要。例如，如果您的代码如下

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

if #scnddiv is the div you want to make 100%, not only you have to make html and body 100% but also #firstdiv. So it will look something like this

如果#scnddiv是想要100％制作的div，那么你不仅必须使html和body 100％，而且还需要#firstdiv。所以它看起来像这样

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

then you can make anything in that div to be 100%.

然后你可以在该div中做任何事情100％。

I hope this helps.

我希望这有帮助。

#1