tło css 100% szerokości poziomego przewijania problem

Question

Jestem stoi ten problem, kiedy przewijać okno na poziome następnie stopki i nagłówka przerwy.

Proszę o pomoc z CSS

Można sprawdzić demo na żywo tutaj http://yeszindagi.com/

body { 
     font-family: Arial, Helvetica, sans-serif; 
     font-size:1.3em; 
     min-height:100%; 
    } 


    .containerMain { 
     min-height:100%;  
     width: 100%; 
    } 


    .full { 
    width:100%; 
    } 

    .fixed { 
    width:900px;  
    } 


    .footer { 
     border-top:1px dashed #000; 
     margin-top:5px; 
     height:50px; 
     background-color:#F7B200; 
     bottom:0px; 
     position:relative; 
    } 

----------------------- ----- KOD HTML ----------------------------------------

<div class="containerMain"> 
    .... 
    ..... 
    ......... 
    <div class="full footer clear "> 
     <div class="fixed center"> 
      <div class="left"> 
       <ul class="links"> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Contact</a></li> 
        <li><a href="#">Contact</a></li> 
       </ul> 
      </div>  
      <div class="social right"> 
       <a href="#" target="_blank" title="Facebook"><span class="facebook-mini"></span></a> 
       <a href="#" target="_blank"><span class="twitter-mini" title="Twitter"></span></a> 
       <a href="#" target="_blank"><span class="pinterest-mini" title="Youtube"></span></a> 
       <a href="#" target="_blank"><span class="linkedin-mini" title="Linkedin"></span></a> 
      </div> 
     </div> 
    </div> 
    </div> 

Answer 1

Proponuję jedno rozwiązanie z jquery:

$(window).bind('resize', resizeHandler); 

function resizeHandler(){ 
var newWidth = $(document).width(); 

$('.footerWrapper').css('width', newWidth); 

} 

Umieść divy funkcji, które chcesz dopasować szerokość dokumentu i dodać do body onload = "resizeHandler()" atrybut.

Answer 2

Najlepszym sposobem rozwiązania tego problemu jest użycie CSS.

Zastosuj min-width do kontenera nadrzędnego i upewnij się, że jego dzieci mają numer width: 100%. Zobacz poniżej:

.containerMain { 
    width: 100%; 
    min-width: 900px; 
} 
.footer { 
    width: 100%; 
} 

Answer 3

Nie można tego osiągnąć tylko za pomocą css. Musisz mieć integrację z jquery.

$('.footer').css({width:$('html').outerWidth()+$(window).scrollLeft()}); 

Spróbuj tego. Powinno działać!

Answer 4

Poniżej właściwości CSS powinny być w stanie rozwiązać lewę.

.divwithbackground{ overflow-x: hidden;}