2009-07-01 3 views
1

ich diese approximatley StrukturCSS Anschlagelement aus größerer Höhe als Mutter

<div> <div id='1'> </div> <div id='2'> </div> </div>

Ich will es machen, so dass, wenn zu groß 1 Inhalt div für sie und div 2 im Haupt div passen , es wird eine Bildlaufleiste erhalten und nichts von der Unterseite des Eltern-Div schieben.

Wie kann ich dies in CSS tun?

EDIT:

die Mutter div (oder besser gesagt, seine Eltern) eine festgelegte Höhe. und an diesem Punkt Einstellung Überlauf: Scroll auf Div1 bewirkt nur, dass es mit einer Bildlaufleiste auf der Seite über den Boden gehen.

+0

Ich war unter dem Eindruck - im Hinterkopf habe ich nicht die Theorie getestet -, dass wie viel Inhalt Sie auch in div # 1 (und div # 2) das Elternteil div erweitern wird, es sei denn, Sie haben eine definiert explizite Breite auf diesem Elternteil? –

+0

Div-IDs können nicht mit Zahlen beginnen, daher können beim Testen Fehler auftreten, die nichts mit der Nützlichkeit der Lösung zu tun haben –

+0

yeah, es war nur zur Illustration – AlexH

Antwort

1

Zuerst müssen Sie Überlauf: blättern auf div 1. Und Sie müssen auch irgendwie einen solchen Wert seiner Höhe fixieren, dass die div eine Scrollbar benötigen nach diesen Wert erreichen. Sollte kein Problem sein, wenn Sie eine feste Höhe oder maximale Höhe auf Ihrem Elternteil haben.

EDIT

Check this out: http://www.quirksmode.org/css/overflow.html. Es scheint (leider), dass Sie trotzdem einen Wert für die Höhe Ihres div 1 benötigen. Ich habe herausgefunden, dass die maximale Höhe auch ausreicht. Und damit die Bildlaufleisten nur bei Bedarf erscheinen, benötigen Sie einen Überlauf: auto.

0

Verwenden

overflow:scroll 

in Ihrem CSS auf div1.

+0

Sorry für die Verwirrung. Ich habe das versucht und es funktioniert nicht. Irgendwie erbt Div 1 nicht eine maximale Höhe von dem Elternteil – AlexH

+0

Siehe den Kommentar von Neutrino. Möglicherweise müssen Sie auch eine feste Höhe für div 1 festlegen. – Peter

0

Sie können die Überlaufeinstellung verwenden:

#id 
{ 

    overflow: scroll; 

}