个人中心
gpt4 book ai didi

html - 将页面宽度固定为 100% CSS

转载 作者：太空宇宙 更新时间：2023-11-04 03:42:18 26 4
gpt4 key购买 nike

我有以下网页，我认为我写得很好，可以将页面宽度调整到 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">&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;
}

最佳答案

从 level class 中移除 width:100% 

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

到

.level {
height: auto;
}

关于html - 将页面宽度固定为 100% CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24701945/

26 4 0
文章推荐： php - Symfony2 Web 应用程序部署
文章推荐： C- Readline() undefined reference
文章推荐： css - 自定义 jQuery 主题，但未应用某些 CSS
文章推荐： html - 设置长列表元素的样式，以便在没有位置时出现在新行中
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com