如果使用DOCTYPE，则CSS样式无法正确应用

一尘不染

如果使用DOCTYPE，则CSS样式无法正确应用

css

1）Css样式无法正确应用于我的HTML页面，如果我在html上添加了特定版本，例如HTML5，HTML4.1
strict等，则如果删除所有DOCTYPE语句，则效果很好。

我的HTML代码（无需DOCTYPE即可正确显示）：

<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

我的HTML代码（背景色红色不适用于DOCTYPE）：

<!DOCTYPE html>
<html> 
<head>
<title>Test</title>
</head>
<body style="background-color:green;height:100%;width:100%;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

另外，我尝试使用HTML5而不是HTML5严格，

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

和，

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

但是没有任何一个。如何正确添加版本。

2）也是现在最好的版本。带有XHTML的HTML5或html4.01或HTML 4.01？

阅读 245

2020-05-16

共1个答案

一尘不染

问题在于div设置为100％（正文）的100％，这对我们来说是有意义的，但对浏览器而言却不是。如果将主体位置设置为绝对位置并将其上，下，左，右设置为0，则将获得相同的效果，并且div的高度设置将按您期望的方式工作。这是代码。

<!DOCTYPE html>

<html> 
<head>
<title>Test</title>
</head>
<body style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;background-color:green;">
<div>My Test page</div>
<div style="background-color:red;height:100%;width:10%;"></div>
</body>
</html>

2020-05-16