2009-11-11 31 views
0

这是我目前的HTML结构。页脚div独自坐在BODY中。CSS需要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%的宽度只是获得它的容器的大小 - 正如我所料。但是,我怎样才能使它达到页面的宽度?

回答

1

尝试将左右属性设置为0;

+0

试过了,没有工作。 #footer-bg绝对是位置,它是.footer [1 | 2]的父级,所以左右相对于该div。与.container一样。 – zilla 2009-11-11 08:25:09

0

您没有很好地定义问题。

,如果你想将其设置在中间设置利润率

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

如果你的意思是针对Firefox别的下载的Firebug插件,并检查页面的页脚做你想要做的,看看结构什么, CSS规则。 它始终工作