Question

这是我目前的HTML结构。页脚div独自坐在身体里。

  <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;

Answer 2

你没有很好地定义问题。

如果你想把它设置在中间设定的边距

margin:0 10px;
width:%your pages width%;

如果你的意思是其他的东西下载Firefox的Firebug插件，并检查页面的页脚做你想做的事情，并看看结构和CSS规则。 始终有效

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

2 个答案: