我刚开始构建一个cms，我甚至还没有开始服务器端的脚本编写，但我注意到我的html标记每次在html中声明doctype标记时，整个html和body标记都会缩短，这是一张截图http://postimg.org/image/h3lj4ozzd/我已经检查了我的css和html是否有任何错误，但我找不到任何错误。我最初使用firefox来运行我的页面，我甚至切换到chrome，但错误仍然会出现。我甚至试着用wamp在windows系统上运行它（我使用的是linux），但错误仍然存在。我试过了所有我能找到的东西，但都不起作用。。。请给我建议。感谢
这是正常的文件http://postimg.org/image/xcahm9bsj/
这是一个包含doctype的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome to quick score</title>
<link rel = "stylesheet" href = "style.css" />
</head>
<body>
<div id = "top_bar"><p>Home</p></div>
<div id = "two">
<p>Database connection was succesful</p>
</div>
<div id = "one">
<ul>
<li><a href="#"><img src = "images/sidebar/dashboard.png" /> Dashboard</a></li>
<li><a href="#"><img src = "images/sidebar/attendance.png" /> Attendance sheet </a></li>
<li><a href="#"><img src = "images/sidebar/grades.png" /> Grades</a></li>
<li><a href="#"><img src = "images/sidebar/students.png" /> Students</a></li>
</ul>
</div>
</body>
</html>
这是我使用的css文件
@charset "utf-8";
/* CSS Document */
body {
margin: 0 auto;
padding: 0;
border: 3px solid #000000;
}
p {
padding: 0;
margin: 0;
font-family: "Trebuchet MS";
}
a {
text-decoration: none;
}
#top_bar {
padding-top: 5px;
background-image: url(images/back3.jpg);
color: #ffffff;
border-bottom: 2px solid #ffffff;
height: 40px;
width: 100%;
}
#one { background-image: url(images/back3.jpg);
width: 15%;
height: 100%;
margin-top: -16px;
color: #ffffff;
}
#one ul {
list-style-type: none;
padding: 0;
height: 50%;
padding-top: 20px;
}
#one ul li {
padding-bottom: 2px;
text-align: left;
display: block;
}
#one ul li a {
color: #ffffff;
padding-top: 6px;
padding-bottom: 6px;
width: 100%;
display: block;
font-family: "Comic Sans MS";
}
#one ul li a:hover {
background-color: #ffffff;
}
#one ul li a img {
margin-bottom: -10px;
}
.position {
margin-top: 5px;
}
#one ul li a:hover {
color: #000;
}
#one ul li:active{
text-decoration: none;
background-color: blue;
padding-left: 48px;
padding-right: 47px;
padding-bottom: 9px;
text-align: center;
}
#two {
width: 81.5%;
height: 200px;
float: right;
padding: 20px 0 0 20px;
}
.login {
margin: 0 auto;
padding: 10px;
background-color: #999;
}
form ul li {
padding-bottom: 5px;
display: block;
}
#white {
display: block;
background-color: black;
height: 40%;
width: 50%;
}
.buttons {
color: white;
margin-left: 60px;
}
.register_buttons {
color: white;
margin-left: 70px;
}
input[type=submit] {
border: 1px solid #f44c0e;
color: #fff;
background: tomato;
padding: 10px 20px;
border-radius: 3px;
}
input[type=submit]:hover {
background: #f44c0e;
}
对于符合HTML5的浏览器和跟随web发展的好方法，请保持doctype的位置。
你试过添加吗：
html, body{
width:100%;
height:100%;
}
此外，你应该去掉你的borders，特别是在body上。否则添加：
*{box-sizing: border-box;}