nền css 100% chiều rộng cuộn ngang số phát hành

Question

Tôi đang gặp phải vấn đề này khi tôi cuộn cửa sổ sang ngang rồi ngắt chân trang và đầu trang.

Xin giúp với CSS

Bạn có thể kiểm tra các bản demo sống ở đây 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; 
    } 

----------------------- ----- HTML CODE ----------------------------------------

<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

Tôi đề nghị bạn một giải pháp với jquery:

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

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

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

} 

Đặt các hàm divs mà bạn muốn vừa với chiều rộng tài liệu và thêm vào thuộc tính onload = "resizeHandler()" của cơ thể.

Answer 2

Cách tốt nhất để giải quyết vấn đề này là thông qua CSS.

Áp dụng min-width cho vùng chứa chính và đảm bảo con của nó có số width: 100%. Xem bên dưới:

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

Answer 3

Điều này không thể đạt được chỉ bằng css. Bạn cần phải có tích hợp jquery.

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

Hãy thử điều này. Nên làm việc!

Answer 4

Thuộc tính CSS dưới đây sẽ có thể giải quyết mẹo.

.divwithbackground{ overflow-x: hidden;}