Wie ein Div den Raum über einem anderen Div automatisch auffüllen lassen?

KratzKatz

Hallo,

arbeite an einem eigenen WordPress-Theme und plage mich seit ein paar Stunden mit einem Problem...:
Undzwar habe ich einen div-container, indem sich 2 weitere divs befinden.
Das untere div ist in seiner Größe variabel, da es ein Text-Widget beinhaltet.
Das div darüber soll immer den Rest des Containers füllen, mit einem Abstand von 20px dazwischen.

Aber das mag nicht so ganz funktionieren..
Habe es mit display: table-row versucht.
Aber dann war kein Margin mehr möglich, sowie das Abrunden der Ecken.

Dann habe ich in einer neuen HTML-Datei versucht, dass irgendwie so mit dem Nötigsten hinzubekommen. Auch das klappte nicht.
Kann mir da vielleicht jemand helfen?

HTML

<html>    <head>        <meta charset="utf-8"/>        <link rel="stylesheet" type="text/css" href="style.css">    </head>    <body>        <div id="container">        <!-- Das ist der Container -->            <div id="top">
                    <p>Dieses div soll seine Höhe automatisch anpassen</p>            </div>                    <p>Von diesem verändert sich die Höhe stetig</p>            </div>        </div>    </body></html>

Code

#container{
    width: 300px;
    height: 300px;
    background-color: #444;
    display: block;
    position: relative;
    top: 0px;
}




#top
{
    width: 98%;
    height: auto;
    display: block;
    position: relative;
    background-color: aqua;
}




#bottom
{
    margin-top: 20px;
    width: 95%;
    height: auto;
    display: block;
    position: relative;
    background-color: blueviolet;
}

Alles anzeigen

Sailor

Zunächst solltest du deinen Code strukturiert schreiben... dann fällt die sicherlich sofort auf, dass dir das öffnende <div id="bottom"> fehlt.

Zur Problemlösung solltest du in Richtung 'CSS Flexbox' denken.... https://css-tricks.com/snippets/css/a-guide-to-flexbox/

dann könnte dein CSS in etwa so aussehen (ungetestet und nur zum 'spielen'):

HTML

#container {
    width: 300px;
    height: 300px;
    background-color: #444;
    display: flex;
    flex-direction: column;
}


#top {
    width: 98%;
    flex: 1;
    background-color: aqua;
}


#bottom {
    margin-top: 20px;
    width: 95%;
    flex: 0;
    background-color: blueviolet;
}

Alles anzeigen

KratzKatz

Danke, musste bei #top das height: 100%; dalassen
Ich muss zugeben, dass ich mit den flex-Attributen noch nichts zu tun hatte..

Habe den Code vereinfacht und versehentlicht das Tag mit der "bottom"-ID entfernt oder überschrieben. Weshalb der html-Code so formatiert ist lag nicht bei mir. Habs ja wie bei dem CSS-Code aus dem Brackets-Editor kopiert.

Tags