divs min-height

wstefan11

Hallo,
ich bin zimelich unerfahren mit html und css und fange momentan mit meinen ersten Schritten an. Mein Problem dass ich bei meiner Testseite momentan habe, dass ich habe ein Div mit min-height. In diesem Div sind mehrere Divs die über die min-height gehen. Nun vergrößert sich dass Hauptdiv leider nicht mit. Habe jetzt schon einiges probiert aber leider wird dass Hauptdiv nur vergrößert wenn ich einen Text, Tabelle einsetzte. Durch Div's bleibt es wie es ist. Kann mir jemand helfen wie ich es hinbekomme dass es sich auch durch div's vergrößert, oder gibt es hierfür auch andere wege?

PHP

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>test</title>
    <link href="css.css" rel="stylesheet" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
  </head>
  <body>
    <div class='wrapper'>

        <div class='header'>        </div>    

        <div class='menu'>        </div>    

        <div class='content'>        
            <div class='test'>        </div>
            <div class='test'>        </div>
            <div class='test'>        </div>
            <div class='test'>        </div>
            <div class='test'>        </div>
            <div class='test'>        </div>
            <div class='test'>        </div>
            <div class='test'>        </div>
        </div>    

    </div>
  </body>
</html>

Alles anzeigen

PHP

body{
    font-size:                    15px;
    font-family:                 courier;
    text-align:                     center;
}


.wrapper{
    width:                    1400px;
    height:                    900px;
    margin:                    auto;
    background-color:        red;    
}


.header{
    width:                    100%;
    height:                    150px;
    background-color:        blue;    
}


.menu{
    width:                    100%;
    height:                    50px;
    background-color:        green;    
}


.content{
    width:                    100%;
    height:                    auto;
    min-height:                700px;
    background-color:        yellow;    
}


.test{
    width:                    40%;
    height:                    200px;
    background-color:        purple;    
    float:                    left;
    border:                    1px solid red;
}

Alles anzeigen

Dass Gelbe ist mein Hauptdiv und vergrößert sich nicht

MFG wstefann11

Sailor

Warum das so ist, durchschaue ich auch nicht, denn eigentlich wird die Größe (Höhe) durch den Inhalt bestimmt, wenn es nicht durch andere Angaben eingeschränkt wird. Vielleicht zählen leere <div>'s nicht als Inhalt - aber so geht es.

HTML

.content{
    width:                    100%;
    min-height:                700px;
    background-color:        yellow;
    overflow: auto;
}

Arne Drews

Ich würde denken, dass für solche Zwecke das Flexmodell sehr gut geeignet ist. Damit kann man solche Dinge nämlich steuern.
Wie sich das mit leeren DIVs verhält, kann ich ungetestet leider nicht sagen.

MrMurphy

Hallo

Zitat

oder gibt es hierfür auch andere wege?

Ja. HTML und CSS korrekt verwenden.

Das was du erstellst hat mit HTML / CSS nur am Rande zu tun. Deine Vorstellungen entsprechen Webseiten aus dem letzten Jahrtausend.

Wenn du Webseiten erstellen willst solltest du zunächst die Grundlagen vom aktuellen HTML / CSS lernen. Die Zeiten von "Learning by Doing" sind schon lange vorbei.

So sind Webseiten dafür ausgelegt Informationen weiterzugeben. Leere Container haben aber keine Informationen. Deshalb sind solche Webseiten auch zum Üben oder gar Lernen nicht geeignet. Ein Problem ist, das Leute die HTML / CSS falsch lernen große Schwierigkeiten haben, später auf aktuelles HTML / CSS umzuschwenken.

Wie Sailor bereits schrieb wird die Höhe von Elementen durch deren Inhalt bestimmt, nicht durch height-Angaben, welcher Art auch immer. Height-Angaben stören beim Layout. Die sollten also so weit wie irgend möglich vermieden werden.

Container mit height-Angaben verhalten sich anders als Container, deren Höhe durch ihren Inhalt bestimmt wird.

Zitat

Habe jetzt schon einiges probiert aber leider wird dass Hauptdiv nur vergrößert wenn ich einen Text, Tabelle einsetzte.

Zum Verständnis ist es sinnvoll überall die gleichen Bezeichnungen zu verwenden. Ich gehe mal davon aus, das du mit Hauptdiv das div.content meinst und nicht das überflüssige div.wrapper. Nebenbei solltest du von Beginn an die im aktuellen HTML bestimmten Containerbezeichnungen wie header, nav, main. ... verwenden. div ist nach den aktuellen HTML-Regeln nur noch für Container zulässig, für die es keine geeignetere Bezeichnung gibt.

Das Problem liegt an dem float, welches du falsch verwendest. Float ist dafür gedacht, das Text Grafiken umfließen kann. Du hast aber weder Text nach Grafiken.

Hintergrundinfo: Gefloatete Elemente werden automatisch aus dem Dokumentenfluß genommen. Gefloatete Elemente (also auch gefloatete div) haben damit keinen Einfluß mehr auf die sie umgebenden Container und können somit auch deren Höhe nicht verändern.

Das div.content hat nur durch das CSS eine Höhe. Wenn du min-height löscht schrumpft die Höhe auf Null und es wird nicht mehr angezeigt.

Verwende deshalb statt float besser Flexbox. Und fülle die Seite zuvor mit Inhalt.

Gruss

MrMurphy

Tags