• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Overflow Container mit dynamischer Höhe

L

Lux12

Neues Mitglied
Hallo,

Ich habe folgenden Code:
HTML: 
<body>
  <header>
  <div id=oben>
    <p>
      Inhalt
    </p>
  </div>
  <div id=mitte>
    <p>
      Langer Inhalt
    </p>
  </div>
  <div id=unten>
    <p>
      Inhalt ohne Inhalt
    </p>
  </div>
  </header>
</body>

Code: 
body {width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial; color: #fff; text-align: center; font-size: 1.3rem;}

div {width: 19%; max-width: 20rem;}

#oben {height: 3rem; position: fixed; background: #449CD5; top: 0;}

#mitte {color: #000; background-color: #ECF0F1; font-size: 1.1rem; position: absolute; bottom: 6%; top: 3rem; overflow-y: auto;}
#mitte p {padding: 1rem;}

#unten {height: 6%; max-height:2.4rem; background-color: #1FAECE; bottom:0; position: fixed;}
JSFiddle

Nun habe ich das Problem, das ich für #unten max-height definiert habe und wenn diese erreicht ist, #mitte nicht mehr bis #unten geht.

Meine Frage lautet also: Wie bekomme ich es hin das #mitte immer den gesamten Platz zwischen #oben und #unten einnimmt?

Ähnlich ist es bei Instagram, es wird auch keine länge/höhe angegeben. Theoretisch ist es dieselbe Konstellation, denke ich.
unbenannt-png.4616

Allerdings konnte ich aus dem Quellcode trotz einiger Versuche nicht herleiten wie es dort gemacht wird. Viellleicht einer von euch? Instagram-Foto

Vielen Dank im Voraus!

Liebe Grüße
Lux
 

Anhänge

  • Unbenannt.PNG
    Unbenannt.PNG
    835,4 KB · Aufrufe: 46
Lux12 schrieb:
Allerdings konnte ich aus dem Quellcode trotz einiger Versuche nicht herleiten wie es dort gemacht wird. Viellleicht einer von euch?
Zum Vergrößern anklicken....
Seltsam :(

Mit dem integrierten DevTool im Browser ergibt sich doch rucki zucki, dass das Konzept auf dem Flexbox-Modell basiert o_O

So sorgt am Ende der Kette flex-grow:1 dafür, dass <ul> zwischen den beiden <section> die Vertikale komplett einnimmt/ausfüllt.

chrome_devtool.jpg
 
Wenn auch etwas spät, danke für deine Antwort! Das habe ich auch versucht, aber leider ohne Erfolg. Ich habe nun dies hier gefunden. Allerdings überlappt article bei mir #container. Eine Idee womit das Zusammenhängen könnte? So wie bei CSS Playground kann ich es leider nicht machen, weil die höhe von #unten wegen der max-height nicht immer gleich ist.
 
Hallo

weil die höhe von #unten wegen der max-height nicht immer gleich ist
Zum Vergrößern anklicken....

Warum überhaupt solche height-Angaben? Ich kann bislang keinen Sinn für die Höhenangaben der Kindelemente von boby erkennen. Die Höhe von Containern sollte immer von ihrem Inhalt bestimmt werden.

Davon gibt es nur wenige sinnvolle Ausnahmen. Zum Beispiel die Höhe von html und body, wenn die Webseite immer die gesamte Fensterhöhe ausfüllen soll.

Wobei ich dein Problem eventuell immer noch nicht vollständig verstanden habe.

Ich habe mal eine Beispielseite mit fixed header und footer ohne height-Angaben außer für html und body erstellt:

http://boratb.bplaced.net/index10.html

Gruss

MrMurphy
 
MrMurphy schrieb:
Warum überhaupt solche height-Angaben? Ich kann bislang keinen Sinn für die Höhenangaben der Kindelemente von boby erkennen. Die Höhe von Containern sollte immer von ihrem Inhalt bestimmt werden.
Zum Vergrößern anklicken....
Seh' ich genauso. Außerdem hat mich von Beginn an dieser wilde Mix von relativen Einheiten irritiert/gestört.
Lux12 schrieb:
dies hier
Zum Vergrößern anklicken....
würde ich auch ohne Höhenangaben belassen, und stattdessen mittels padding-top|-bottom für gewisse Abstände im Header- u. Footer-Bereich sorgen :cool:

In meiner Fiddle-Variante habe ich die beiden Höhenangaben lediglich ergänzt, um ein mögliches Fehlverhalten innerhalb des Flexbox-Modells zu prüfen/dokumentieren (Ergebnis: erwartungsgemäß negativ).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben