Posizione assoluta destra - Nessuna barra di scorrimento visibile

Question

Quando posiziono il wrapper in modo assoluto e corretto, non viene eseguita alcuna barra di scorrimento orizzontale quando si riduce la finestra.

Esempio: http://jsfiddle.net/Ue6aN/

Codice:

<div id="wrapper"></div> 


#wrapper { 
width: 400px; 
height: 400px; 
position: absolute; 
right: 20px; 
top: 0px; 
border: 1px solid red; 
} 

Se posso passare a destra: 20px; a sinistra: 20px; funziona, ma non altrimenti Qualche idea su come risolvere il problema senza javascript?

Answer 1

Il problema è che non ci sono contenuti seguenti #wrapper. Per ottenere uno scroll orizzontale ci deve essere contenuto ancorato sul bordo sinistro del documento che diventa nascosto quando il viewport è ristretto, o detto contenuto supera la larghezza della finestra. Poiché #wrapper è mobile a destra, è impossibile perché non ha un punto di ancoraggio sul lato sinistro. funziona comunque.

#wrapper { float:right ... } 

body:after { 
    clear:right; 
    content:' '; 
    display:block; 
    height:1px; 
    min-width:420px 
} 

Il CSS sopra aggiunge uno spazio dopo il contenuto di body, che è #wrapper. Quello spazio è almeno la larghezza del modello di box di #wrapper, ma non ha il float ed è ancorato al bordo sinistro del viewport. Quindi ... non appena il suo estremo lontano è nascosto, lo scorrimento orizzontale viene attivato; dando così l'illusione che #wrapper stia causando l'evento di scorrimento.

il violino: http://jsfiddle.net/jg3nH/

Answer 2

Utilizzare il float a destra sarebbe più logico per me, ma è necessario posizionare in modo assoluto la larghezza o la larghezza minima dell'elemento contenitore.

body { 
    position: relative; 
    height: 400px; //needs to be at least 1px 
    width: 100%; 
    min-width: 422px; // the width you'd like to horizontal scrollbar to appear 
}