Zwei übereinander liegende Divs, zusammen exakte Höhe 100% + unterer scrollbarer Div

8

Ich stecke mit diesem Problem fest:

Ich habe ein div (#container), das zwei divs enthält. Die Höhe des Containers sollte genau 100% betragen, unabhängig vom Inhalt dieser Div-Datei, nicht mehr nicht mehr.

Innerhalb dieses div möchte ich zwei dots voller Breite übereinander:

  • Der Inhalt des (#upper) divs bestimmt automatisch seine Höhe.
  • Der Inhalt des (#lower) divs sollte scrollbar sein, aber nur vertikal. Seine Höhe hängt von der Höhe von (#upper) ab: 100% - (#upper) height = (#lower) height

Zur Zeit habe ich die folgenden css ...

%Vor%

... sowie diesen Code:

%Vor%

Wie kann die (#container) Höhe genau 100% betragen - unabhängig vom Inhalt? Jetzt wird die Höhe wegen des kombinierten Inhalts von (#upper) und (#lower) größer?

Wie kann (#lower) gescrollt werden (nur hoch und runter, nicht von links nach rechts!)?

Vielen Dank für Ihr Feedback, ich hoffe, wir können alle davon lernen.

    
ravax 18.08.2013, 20:14
quelle

4 Antworten

3

Sie sollten Ihre html - und body -Elemente auf eine Höhe von 100% setzen, damit Ihre untergeordneten divs wissen, wofür der Prozentanteil verwendet werden soll. Wie so:

%Vor%

Ändern Sie Ihren Container wie folgt:

%Vor%

Was Ihr Scroll-Problem betrifft, sind Sie fast da. Ändern Sie den Code wie folgt:

%Vor%

Damit es am besten funktioniert, müssen Sie eine feste Höhe für Ihr unteres Div festlegen, damit die scrollbare Aktion am besten funktioniert.

BEARBEITEN:

Ich habe bemerkt, dass ich deine Frage falsch gelesen habe. Sie möchten, dass Ihr unteres div die verbleibende Höhe des Fensters ausfüllt. Hier ist, wie Sie das in jquery tun:

%Vor%

Ich habe immer noch keinen Weg gefunden, das nur mit CSS zu tun ... Leider.

    
John 18.08.2013, 20:21
quelle
2

Ich denke, das kann Ihnen helfen:

%Vor%

Dies wird 50px aus dem unteren div herausholen

    
Ramsesus 21.10.2015 17:03
quelle
1

Verwenden Sie für eine reine CSS-Lösung display: table-row.

%Vor%

Diese Lösung funktioniert nur, wenn die Höhe des Inhalts nicht mehr als 100% beträgt, siehe hier: Ссылка

    
Teetrinker 09.06.2015 14:28
quelle
0

Hier eine 100% CSS-Alternative:

%Vor%

Denken Sie daran, dass für alle übergeordneten Elemente, einschließlich body und html, auch die Höhe festgelegt werden muss.

    
Cesar 24.01.2014 02:28
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Unterschied zwischen der Verwendung des try-Catch-Exception-Handlers und der if-Bedingungsprüfung? [Duplikat]