修復頁面寬度到100％CSS

我有以下的網頁，我認爲我寫的很好，以適應100％的頁面寬度，但我錯過了某個地方，導致頁面有一個水平滾動條和頁面寬度略高於100％，在水平尾部有一個小的白色間距，請有人給我一個修復。修復頁面寬度到100％CSS

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">&nbsp; 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">&nbsp; 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">&nbsp; Technology Partners</div> 
        <div class="clear"></div> 
        <div align="center" class="freecontent"> 
        <img src="Img/java-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/php-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/mysql-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/netbeans-logos.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/wordpress-icons.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/html5-logos.png" width="60" height="60" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/css3-logos.png" width="60" height="60" /> 
        </div> 
       </div> 
       <div class="offerbox"> 
        <div class="captionbar orangegradient">&nbsp; Find Us</div> 
        <div class="freecontent" align="center"><img src="Img/LinkedIn-icon.png" width="54" height="54" />&nbsp;&nbsp;&nbsp;&nbsp;<img src="Img/Facebook-icon.png" width="54" height="54" />&nbsp;&nbsp;&nbsp;&nbsp;<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; 
}

來源

2014-07-11 Dilukshan Mahendra

，而是如果保證金：汽車到處都增加了保證金只需要保證金左：自動和利潤率右：汽車 –

刪除寬度：100％從一級類，以便從

.level { 
width: 100%; 
height: auto; 
}

到

.level { 
height: auto; 
}

來源

2014-07-11 16:11:14 codenathan

這一個伎倆，謝謝你好朋友！ –

你可以嘗試添加

*{padding:0}

到CSS的開始。這會告訴你，如果問題是填充在元素上導致寬度被擴展。我的猜測是.contentarea div有一些填充分配。

來源

2014-07-11 16:07:59

修復頁面寬度到100％CSS

回答

相關問題