我有以下网页，我认为我写得很好，以适应页面宽度100％，但我错过了某个地方，导致页面有一个水平滚动条和页面宽度略高于100％在页脚末端有一个小的白色间距，请有人给我一个修复。
HTML页面
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DoIT</title>
<link href="Scripts/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="contentarea">
<div class="level gradient shadowmkr">
<div class="headerarea">
<div class="col4"><img src="Img/DoIT Logo.png" width="300" height="75" /></div>
<div class="col8">
<div class="navitem">
<center>HOME</center>
</div>
<div class="navitem">
<center>COURSES</center>
</div>
<div class="navitem">
<center>SOLUTIONS</center>
</div>
<div class="navitem">
<center>CONTACT US</center>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level">
<div class="imgsliderarea">
<img src="Img/people.png" width="920" height="500" />
</div>
</div>
<div class="clear"></div>
<div class="level3">
<div class="summaryboxarea">
<div class="summarybox">
<center>
<img src="Img/Flaticon_14323.png" width="128" height="128" />
</center>
<h2 align="center">Who We Are</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<center><a href="#" class="button-orange">Read More</a></center>
</div>
<div class="summarybox">
<center>
<img src="Img/Flaticon_42968.png" width="128" height="114" />
</center>
<h2 align="center">What Makes Our Courses Unique</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<center><a href="#" class="button-orange">Read More</a></center>
</div>
<div class="summarybox">
<center>
<img src="Img/Flaticon_44520.png" width="128" height="128" />
</center>
<h2 align="center">What Makes Our Solutions Unique</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.</p>
<center><a href="#" class="button-orange">Read More</a></center>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level">
<div class="newsarea borderline">
<div class="newsbox">
<div class="captionbar orangegradient"> News and Events</div>
<div class="spacebar"></div>
<p align="justify"><img style="margin-right:10px" align="left" src="Img/student.png" width="187" height="150" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.</p>
<br />
</div>
<div class="offerbox">
<div class="captionbar orangegradient"> Special Offer</div>
<div class="spacebar"></div>
<p align="justify"><img align="left" src="Img/special_offer.png" width="162" height="150" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level">
<div class="newsarea">
<div class="newsbox">
<div class="captionbar orangegradient"> Technology Partners</div>
<div class="clear"></div>
<div align="center" class="freecontent">
<img src="Img/java-icons.png" width="60" height="60" /> <img src="Img/php-icons.png" width="60" height="60" /> <img src="Img/mysql-icons.png" width="60" height="60" /> <img src="Img/netbeans-logos.png" width="60" height="60" /> <img src="Img/wordpress-icons.png" width="60" height="60" /> <img src="Img/html5-logos.png" width="60" height="60" /> <img src="Img/css3-logos.png" width="60" height="60" />
</div>
</div>
<div class="offerbox">
<div class="captionbar orangegradient"> Find Us</div>
<div class="freecontent" align="center"><img src="Img/LinkedIn-icon.png" width="54" height="54" /> <img src="Img/Facebook-icon.png" width="54" height="54" /> <img src="Img/Twitter-icon.png" width="54" height="54" /></div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="level orangegradient">
<div class="footerarea">
<div class="termsdiv"><a href="#" style="text-decoration:none;color:#FFF">Privacy Policy</a> | <a href="#" style="text-decoration:none;color:#FFF">Terms of Use</a> | <a href="#" style="text-decoration:none;color:#FFF">Site Map</a></div>
<div class="copyrightdiv"><a>© 2014 DoIT Technology Institute & Solutions.</a></div>
</div>
</div>
</div>
</body>
</html>
CSS文件
body{
margin:0px;
padding:0px;
}
.contentarea{
width:100%;
height:auto;
max-width:100%;
}
.level{
width:100%;
height:auto;
}
.headerarea{
height:120px;
width:960px;
margin:auto;
}
.imgsliderarea{
height:500px;
width:920px;
padding:20px;
margin:auto;
}
.summaryboxarea{
width:960px;
height:auto;
margin:auto;
}
.summarybox{
width:280px;
min-height:200px;
padding:20px;
height:auto;
float:left;
}
.newsarea{
width:960px;
height:auto;
margin:auto;
}
.newsbox{
width:600px;
height:auto;
float:left;
padding:20px;
}
.offerbox{
width:280px;
height:auto;
float:left;
padding:20px;
}
.footerarea{
width:960px;
min-height:120px;
height:auto;
margin:auto;
}
.gradient{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
}
.orangegradient{
background: #feb71d; /* Old browsers */
background: -moz-linear-gradient(top, #feb71d 0%, #eda60c 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feb71d), color-stop(100%,#eda60c)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feb71d 0%,#eda60c 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feb71d 0%,#eda60c 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feb71d 0%,#eda60c 100%); /* IE10+ */
background: linear-gradient(to bottom, #feb71d 0%,#eda60c 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feb71d', endColorstr='#eda60c',GradientType=0 ); /* IE6-9 */
}
.partnersarea{
width:920px;
padding:20px;
margin:auto;
height:auto;
min-height:60px;
}
.shadowmkr{
-webkit-box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
-moz-box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
box-shadow: 1px 1px 20px 0px rgba(50, 50, 50, 0.36);
padding:20px;
}
.freecontent{
width:100%;
height:auto;
padding-top:20px;
float:left;
}
.clear{
clear:both;
}
/* Typography */
h2{
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#ffb108;
}
p{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#333;
}
.footertext{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#FFF;
}
.borderline{
border-bottom-width:1px;
border-bottom-style:solid;
border-bottom-color:#ffb108;
}
/* Buttons */
.button-orange {
-moz-box-shadow:inset 0px 1px 0px 0px #feb71d;
-webkit-box-shadow:inset 0px 1px 0px 0px #feb71d;
box-shadow:inset 0px 1px 0px 0px #feb71d;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #feb71d), color-stop(1, #eda60c) );
background:-moz-linear-gradient( center top, #feb71d 5%, #eda60c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#feb71d', endColorstr='#eda60c');
background-color:#feb71d;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
display:inline-block;
color:#ffffff;
font-family:Verdana;
font-size:15px;
font-weight:bold;
font-style:normal;
height:50px;
line-height:50px;
width:100px;
text-decoration:none;
text-align:center;
padding-left:20px;
padding-right:20px;
}
.button-orange:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f87a0a), color-stop(1, #f87a0a) );
background:-moz-linear-gradient( center top, #f87a0a 5%, #f87a0a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f87a0a', endColorstr='#f87a0a');
background-color:#f87a0a;
}.button-orange:active {
position:relative;
top:1px;
}
/*grids*/
.col4{
width:32%;
height:auto;
float:left;
padding:2%;
}
.col8{
width:58%;
height:auto;
float:left;
padding:2%;
padding-top:60px;
}
/*menu items*/
.navitem{
height:25px;
width:120px;
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size:16px;
font-weight:bold;
color:#ffb108;
float:left;
padding-top:5px;
}
.captionbar{
width:100%;
height:27px;
padding-top:3px;
float:left;
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
color:#FFF;
font-weight:bold;
}
.spacebar{
width:100%;
height:20px;
float:left;
}
.navitem:hover{
background-color:#ffb108;
color:#FFF;
cursor:pointer;
} .copyrightdiv {
float: left;
height: 40px;
width: 100%;
padding-left:1%;
padding-top: 10px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
}
.termsdiv {
float: left;
height: 30px;
width: 99%;
padding-left:1%;
padding-top: 30px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
border-bottom-color:#ffb921;
border-bottom-width:1px;
border-bottom-style:solid;
}
答案 0 :(得分：2)
从级别类中移除宽度：100％，所以
.level {
width: 100%;
height: auto;
}
到
.level {
height: auto;
}
答案 1 :(得分：0)
您可以尝试添加
*{padding:0}
到CSS的开头。这将告诉您问题是否在元素上填充导致宽度扩展。我的猜测是.contentarea div分配了一些填充。