Question

当我使用不带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>

如何解决这个问题？

Answer 1

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

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

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

Answer 2

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

要做你想做的事，在CSS中添加： HTML，身体{高度：100％}

Answer 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和身体100％，而且#firstdiv。所以它看起来像这样

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

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

我希望这会有所帮助。

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

3 个答案: