Position absolut rechts - Keine Bildlaufleiste sichtbar

Question

Wenn ich meinen Wrapper absolut und richtig positioniere, wird keine horizontale Bildlaufleiste ausgelöst, wenn ich das Fenster verkleinere.

Beispiel: http://jsfiddle.net/Ue6aN/

Code:

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


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

Wenn ich wechseln rechts: 20px; nach links: 20px; es funktioniert, aber nicht anders. Irgendeine Idee, wie man das ohne Javascript repariert?

Answer 1

Das Problem ist, dass es keinen Inhalt #wrapper finden. Um einen horizontalen Bildlauf zu erhalten, muss am linken Rand des Dokuments ein Inhalt verankert sein, der ausgeblendet wird, wenn das Ansichtsfenster verengt ist oder der Inhalt die Breite des Darstellungsbereichs überschreitet. Da #wrapper nach rechts schwebt, ist das unmöglich, weil es keinen Ankerpunkt auf der linken Seite hat. :after macht es aber funktioniert.

#wrapper { float:right ... } 

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

Die CSS fügt über ein Leerzeichen nach dem Gehalt an body, die #wrapper ist. Dieser Platz ist mindestens die Breite des Boxmodells #wrapper, hat aber keinen Float und ist am linken Rand des Ansichtsfensters verankert. Also ... sobald der äußerste rechte Rand ausgeblendet ist, wird das horizontale Scrollen ausgelöst; Dies gibt die Illusion, dass #wrapper das Scroll-Ereignis verursacht.

Die Geige: http://jsfiddle.net/jg3nH/

Answer 2

Die Verwendung von float right wäre für mich logischer, aber Sie müssen absolute Position haben, um die Breite oder die minimale Breite des enthaltenden Elements festzulegen.

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 
}