Question

我构建了一个非常简单的网站，它以一个包装器为中心，看起来like this。这解决了我必须处理的许多分辨率问题，但我现在的问题是，无论何时更改屏幕，条形颜色都会在包装器的长度处停止。

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="stylesheet" href="main.css" media="screen" />
<title>titel</title>

<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->


</head>

<body>


<!-- ############### -->
<!-- OVERALL WRAPPER -->
<!-- ############### -->
<div class="head_wrapper">


      <!-- HeaderBarMain -->
    <div class="header">
       <h2>Contact us with the number:####</h2>

          <!-- Navigation menu -->      
        <div class="navMain">

            <!-- Menu List -->
            <ul>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>

          </div><!-- END navMain -->
        </div><!-- END header -->

      <!-- Logo Wrapper -->
  <div class="logoWrap">

    <div class="logoholder">
    <img class="logo" src="Pictures/logo.gif" width="297" height="120" alt=""/>

    </div> <!-- END logo holder -->

  </div><!-- END logo Area -->

  <!-- ### Java window ### -->
    <div class="mainWindowContent">

        <div class="JavaGallery">


        </div> <!-- END JAVA holder -->


</div> <!-- END mainWindow content -->



    <!-- Main links window wrapper of dental medical -->
    <div class="wrapMainLinks">

        <div class="mainLinks">

          <ul>
            <li><a href="#">Linkl</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>

        </div> <!-- END mainLinks -->

</div> <!-- END wrapMainLinks -->

    <div class="footerHolder">
        <div class="footerContent">
        <h3>

</h3>
        </div>
    </div>

    <div class="footBarWrapper">

        <div class="footBarContent">


             <h4></h4>

        </div> <!-- END footBarContent -->

        <div class="botNavMain">

                 <!-- Menu List -->
            <ul>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
            </ul>

        </div> <!--END botNavMain-->
    </div>


</div> <!-- END overall wrapper -->





</body>
</html>

CSS @charset＆＃34; utf-8＆＃34 ;; / * CSS Document * /

/* ###################### */
/* General HTML Tag Rules */
/* ###################### */

/*body margin setup*/   
body{
 background-color:#ffffff;
 margin:auto;
 font: normal 100% Arial;
 overflow-x: hidden;
 } 


  /*Link setup style*/
 a {
    color: #ffffff;
    border-bottom: none;
    text-decoration: none;
    }
    a:visited {
    color: #ffffff;
    }
    a:hover,
    a:focus,
    a:active {
    border-bottom: 2px solid;
    }
    a:focus,
    a:active {
    color: #ffffff;
    }



/* ############################ */
/* General Template Class Rules */
/* ############################ */




.head_wrapper  {
    width:1007px;
    margin:0 auto;


}

.logoWrap {



}

.logoholder .extendfull{
    height:145px;

}

.logoholder img.logo{
    margin: 10px 0px 0px 40px;
}

.mainWindowContent {
    background: #ECECEC;
    height: 480px;
    padding:1px;


}

.JavaGallery {
  margin: 5px 0px 10px 0px;
  background:#ffffff;
  height: 460px;
  width:1024px;
}



.wrapMainLinks {
    height: 55px;
    background-image:url(Pictures/Buttom_BG.gif);
    background-repeat:repeat-x;



}
.mainLinks {
    margin: 0px 0px 0px 0px;

}

.header {

    background: #717171;
    background-repeat:repeat-x;
    height: 37px;
    width: 1024px;
    margin-top:0px;



}

.navMain {
    float:right;
    margin:5px 0px 0px 0px;
}

.footerHolder {
    height:150px;
    background: #191919;

}

.footerContent {

}
.footerContent h3 {
    padding: 40px;
    margin:0px 0px 0px 320px;
    font-size:11px;
    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:#D4D4D4;



}

.footBarWrapper  {
    height: 100px;
    background-color: #454444;
    padding: 2px;
    margin: 20px 0px 0px 0px;
}

.footBarContent {
    height: 50px;
    margin: 60px 0px 0px 50px;
    font-size:12px;



}
.botNavMain {
    margin: 20px 0px 0px 0px;
}



/* ############################ */
/*   General Navigation Rules   */
/* ############################ */

.navMain ul {
    margin: 1px 40px 0px 0px;
}

.navMain ul li {
    margin: 0px;
    padding: 0px 20px;
    list-style:none;
    display:inline;
    font-size:13px;
}

.navMain ul li a {
    margin: 0px;
    padding: 0px;

}

.navMain ul li a:hover {
    color:#FFBF06;

}

.header h2 {
    margin: 10px 20px 5px 80px;
    font-size:11px;
    float:left;
    color:#FFFFFF;
}


.mainLinks ul {
    margin: 0px 0px 0px 10px;
    padding: 15px;
    font-size:20px;

}

.mainLinks ul li {
    padding:10px;
    list-style:none;
    display:inline;
    margin:0px 50px 0px 130px

}

.mainLinks ul li a {
    margin: 0px;
    padding: 0px;
    color:#000000;

}

.mainLinks ul li a:hover {
    color:#3E3E3E;

}

.botNavMain ul {
    margin: -100px 0px 0px 0px;
}

.botNavMain ul li {
    margin: 0px;
    padding: 0px 9px;
    list-style:none;
    display:inline;
    font-size:13px;

}

.botNavMain ul li a {
    margin: 0px;
    padding: 0px;
    color:#FFFFFF;

}

.botNavMain ul li a:hover {
    color:#00000;

}

是否可以在包装器外扩展条形以使它们到达浏览器宽度的末端？

Answer 1

最好的方法是从容器/包装器中排除这些。让我们假设容器/包装器只是一个简单的块，比如说980px带边距：0自动居中。

<div class="container">
    <!-- your content for the centered container -->
</div>
<div class="your-bottom-thing-with-colors">
    <!-- your content for the full width div -->
    <!-- you can even add a new container IN this div, to center your content like so: -->
    <div class="container>Content in a full-width bar example</div>
</div>
<div class="container>
    <!-- start your container again with a smaller width and margin:0 auto; -->

您可以通过简单地将其放在容器之前来实现与标题相同的操作。

扩展到包装器之外

1 个答案: