CSS 需要 div 来扩展它的容器宽度

Question

这是我当前的 HTML 结构。页脚 div 单独位于 BODY 中。

  <div id="footer">
     <div class="container">
        <div id="footer-bg">
           <div class="footer1">
              <p class="p1">asd</p>
              <p class="p2">asd</p>
           </div>

           <div class="footer2">
              <p class="p1">asd</p>
              <p class="p2">asd</p>
              <p class="p3">asd</p>
           </div>

           <div class="footer3">
              <p class="p1">asd</p>
           </div>
        </div>
     </div>
  </div>

这是它的 CSS:

  #footer
  {
     position: relative;
     background: url('../footer-bg-repeat.jpg') repeat-x;
     height: 307px;
  }

  #footer #footer-bg
  {
     background: url('../footer.jpg') no-repeat top left;
     height: 528px;
     width: 1587px;
     position: absolute;
     left: -380px;
     top: -221px;
  }

  #footer .footer1
  {
     position: absolute;
     top: 137px;
  }

  #footer .footer1 .p1
  {
     position: absolute;
     left: 500px;
     background: #dcdcdc;
     height: 23px;
     width: 80px;
     text-align: center;
     line-height: 25px;
     font-weight: bold;
  }

  #footer .footer1 .p2
  {
     position: absolute;
     left: 1000px;
     top: -20px;
     background: url() no-repeat top right;
     height: 40px;
     width: 249px;
     text-indent: -9999px;
     z-index: 6;
  }

  #footer .footer2
  {
     position: absolute;
     top: 159px;
     height: 23px;
     width: 100%;
     background: #000;
  }

  #footer .footer2 p
  {
     display: inline;
     line-height: 25px;
     color: #636466;
     height: 23px;
  }

  #footer .footer2 .p1
  {
    position: absolute;
    left: 500px;
    background: url() no-repeat center right;
    width: 175px;
  }

  #footer .footer2 .p2
  {
     position: absolute;
     left: 700px;
     background: #dcdcdc url() no-repeat 60px 8px;
     width: 75px;
     padding-left: 15px;
  }

  #footer .footer2 .p3
  {
     position: absolute;
     left: 800px;
  }

  #footer .footer3
  {
     position: absolute;
     top: 190px;
  }

  #footer .footer3 .p1
  {
     position: absolute;
     left: 500px;
     width: 1000px;
  }

我正在尝试让 .footer2 和 .footer3 扩展容器的宽度，从而允许我为屏幕可能的宽度设置背景颜色。

设置 100% 宽度只是让它达到容器的大小——如我所料。但是，我怎样才能让它达到页面的宽度？

Answer 1

尝试将 left 和 right 属性都设置为 0；