2013-07-10 16 views
7

Please See the issuesfondo CSS 100% larghezza problema di scorrimento orizzontale

Sto affrontando questo problema quando ho scorrere la finestra a orizzontale poi il piè di pagina e intestazione pause.

prega di aiutare con i CSS

È possibile controllare il demo live qui 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; 
    } 

----------------------- ----- CODICE HTML ----------------------------------------

+0

È perché la larghezza del 100% è la larghezza della finestra, non il documento effettivo – user2067005

+0

falguni

+0

body {overflow-x: hidden;} –

risposta

2

Ti suggerisco una soluzione con jquery:

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

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

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

} 

Metti in funzione i div che vuoi adattare alla larghezza del documento e aggiungi al corpo l'attributo onload = "resizeHandler()".

+0

No no, è terribile. Nessuno lo fa – Trip

10

Il modo migliore per risolvere questo problema è tramite CSS.

Applicare uno min-width al relativo contenitore padre e assicurarsi che i relativi figli dispongano di width: 100%. Vedere di seguito:

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

Questo non può essere raggiunto solo da CSS. È necessario avere l'integrazione jQuery.

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

Prova questo. Dovrebbe funzionare!

0

Le proprietà CSS devono essere in grado di risolvere il problema.

.divwithbackground{ overflow-x: hidden;} 
Problemi correlati