Question

我有doctype的问题，似乎当我添加它时，在我的页面中，css不起作用。但是当我删除doctype时，一切正常。可能是什么原因

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="wrapper">
    <div id="header">this is my header
    </div>
    <div id="center_content">
        <div id="left">
        </div><div id="right"></div>
    </div>
    <div id="footer">this is my footer
    </div>
</div>
</body>
</html>

CSS

body
{

margin:0px;
padding:0px;

}
#wrapper
{
height:100%;
width:100%
}
#header
{
width:100%;
height:20%;
background-color:red;
}
#center_content
{
min-height:79%;
height:auto;
background-color:pink;
overflow:auto;

}
#footer
{
height:5%;
background-color:blue;  
}
#left
{
float:left;
min-height:79%;
height:auto;
width:20%;
background-color:brown;
}
#right
{
float:right;
min-height:79%;
height:auto;
width:79%;
background-color:yellow;

}

Answer 1

您的doctype不是问题。您只需要了解何时使用％百分比，您还应该向父/祖先声明百分比宽度和高度<html>和<body＆gt;。

我修改了你的CSS。试试这个。

html, body {
    margin:0px;
    padding:0px;
    width: 100%;
    height: 100%;
}
#wrapper {
    height:100%;
    width:100%;
}
#header {
    width:100%;
    height:20%;
    background-color:red;
}
#center_content {
    height:79%;
    background-color:pink;
    overflow:auto;
}
#footer {
    height:5%;
    background-color:blue;
}
#left {
    float:left;
    height:100%;
    width:20%;
    background-color:brown;
}
#right {
    float:right;
    height:100%;
    width:79%;
    background-color:yellow;
}

因此，当您删除文档类型时，它会在Quirks Mode中输入，这就是为什么在没有doctype的情况下呈现的原因。

Doctype无法正常工作

1 个答案: