Ich habe ein Problem mit doctype, es scheint, wenn ich es hinzufüge, auf meiner Seite funktioniert die CSS nicht. Aber wenn ich doctype entferne, funktioniert alles gut. Was könnte der Grund sein
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;
}
Antworten:
0 für die Antwort № 1Ihr Doctype ist nicht das Problem. Sie müssen nur wissen, wenn Sie% Prozentsatz verwenden, und Sie sollten auch die prozentuale Breite und Höhe dem übergeordneten / Vorfahren angeben <html> und <body>.
Ich hatte deine CSS geändert. Versuche dies.
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;
}
Wenn Sie also den Doctype entfernt haben, wird dieser eingegeben Quirks-Modus deshalb macht es auch ohne doctype gut.