Div auf maximale Höhe bringen

  • Hallo zusammen,


    ich versuche bisher vergeblich, div auf die maximale noch verfügbare Höhe zu bringen. Ich habe hier einen einfachen HTML-Code als Beispiel

    Die drei div's im flex-container sollen bis an den unteren Rand des Browsers gehen, unabhängig vom Inhalt. Kann mir bitte jemand sagen, was ich da falsch mache?


    Danke im voraus

    Biker

  • Das liegt hieran:

    justify-content: flex-start;

    Wenn Du möchtest, dass die inneren Container den Platz ausfüllen musst Du

    justify-content: stretch;

    nehmen (oder es weg lassen, weil stretch Default ist).

    BTW: Bei dem .small würd ich konsequent sein und die Größe ebenfalls mit flex festlegen:

    Code
    1. .small {
    2. flex: 0 1 40px;
    3. }
  • Wow, danke für die superschnelle Antwort, aber das passt leider nicht, wie ich es gerne hätte. Die rot umrandeten Felder sollen bis an den unteren Rand reichen:

    pasted-from-clipboard.png

    und durch das ändern von small ist die maximale Breite leider auch verloren gegangen.


    Wenn noch bitte jemand draufschauen könnte.



    Danke

    Biker

  • Wenn die rot umrandeten Felder bis an den unteren Rand reichen sollen, geht das am besten, wenn Du auch body ein

    Code
    1. body {
    2. display: flex;
    3. flex-direction: column,
    4. }

    gibst.

    Und bei dem div.small ist es daran gescheitert, dass der Selektor für alle Flex-Items spezifischer war und ein höhere Priorität hatte als für div.small.

    So funktioniert es bei mir:

  • Biker

    Dem Body display:flex zu geben ist garnicht nötig. Da würde ich es echt weglassen.

    In deinem zuletzt geposteten Code musst du lediglich die 2 Zeile entfernen:

    CSS
    1. .container {
    2. min-height: 100%;
    3. height:auto !important;
    4. height:100%;
    5. margin:auto;
    6. background-color: #c0c0c0;
    7. }

    Das "!important" verhindert hier die "100%" der nachfolgenden height-Angabe.

    Wenn du die rote Zeile entfernst, sind die Div's wirklich 100%.

    Um jetzt aber nicht volle 100% Höhe & ne Scrollleiste zu haben und die umliegenden Elemente (deine Buttons) zu berücksichtigen,

    setze im Container (nicht body, das brauchst du nicht!) flex ein:

    CSS
    1. .container {
    2. min-height: 100%;
    3. height:100%;
    4. margin:auto;
    5. background-color: #c0c0c0;
    6. display: flex;
    7. flex-direction: column;
    8. }


    Und im flex-container änderst du dann noch "min-height" in "height" um, fertig!

  • Hallo und danke auch dir nextuser


    Ich dachte, ich hätte es verstanden, aber ich habe gestern Abend noch eine ganze Zeit gebastelt, ich bekomme das irgendwie nicht hin. Ich möchte jetzt die bei Content-div's (mit blauem Rahmen) ebenfalls bis an den unteren Rand. Alle meine Versuche haben das nur verschlimmbessert, deshalb wäre ich dabkbar, wenn mir noch mal jemand auf die Sprünge helfen könnte.

  • Die Lösung besteht darin, mit diesen Containern das selbe zu machen, was wir mit body gemacht haben:

    Und einen überflüssigen Container entfernen:

  • Hallo zusammmen,


    habe leider doch noch ein Problem. Da es sich um den gleichen HTML-Code handelt, schreibe ich in diesem Thread weiter.


    Zu meinem Problem:


    Der aktuelle HTML-Code sieht (angepasst für das Forum) so aus:

    Die Tabelle zerreißt leider das Layout, die linke und rechte Seite haben jetzt unterschiedliche Breiten und die Tabelle erhöht die Höhe vom Body.


    Es sollen immer die linke und die rechte Seite gleich breit sein und die Tabelle soll horizontal und vertikal scrollbar sein. Alle Versuche mit z.B. overflow: auto mit width: 100% funktionieren nicht. Ich wäre sehr dankbar, wenn mir nochmal jemand auf die Sprünge helfen könnte.


    Danke und Gruß

    Biker

  • Danke für die schnelle Antwort.


    Die linke Seite mit den Texten abc und die rechte Seite mit der Tabelle sollen beide gleich breit sein. Die mittlere Spalte mit den Buttons hat eine feste Breite.

    Wenn die Tabelle höher oder breiter wird, als das div, in dem sie liegt, muss man die ganze Seite scrollen bzw. die linke Seite wird schmaler. Der von dir in Posting #8 geschriebenen HTML-Code funktioniert soweit perfekt, nur wenn ich auf der rechten Seite eine große Tabelle einbauen, geht das Layout kaputt.


    Ich möchte erreichen, dass man die Tabelle scrollen kann, oder das div, in dem die Tabelle liegt.

    Hoffentlich habe ich das jetzt verständlich genug erklärt, weiß nicht, wie ich das besser beschreiben soll.


    Danke und Gruß

    Biker

  • Um dir wirklich helfen zu können haben wir im Endeffekt zu wenig Informationen von dir.


    So wissen wir nicht welche Informationen die Seite wirklich füllen sollen. Deine Blindtexte sind absolut nichtssagend.


    Auch wenn es dir weh tun wird: In über 15 Jahre meiner Forumhilfe habe ich wahrscheinlich über 1.000 Fragen zum Tabellenlayout beantwortet. Dabei ist mir noch nicht einmal eine Tabelle mit Tabellendaten untergekommen. Ein Grundproblem dabei: Tabellenelemente sind im HTML nur für Tabellendaten gedacht. Deshalb sagt meine Erfahrung: Auch du verwendest HTML-Tabellen falsch und machst dir damit selbst unnötige Probleme. So wie du es dir vorstellst wird die Seite deshalb nicht funktionieren. Da Tabellen in der Praxis so gut wie nie angebracht sind werden sie in vielen aktuellen Lehrbüchern auch nicht mehr behandelt.


    Zu deinem Problem: Die mittlere Spalte hat so weit ich sehe eine Breite von 40px. Die soll sie auch unabhängig von der Fensterbreite beibehalten.


    Deshalb musst du die Breite der linken und rechten Spalte berechnen lassen. Um unterschiedliche Einheiten berechnen zu können gibt es in CSS "calc".


    Die linke Spalte hat eine Breite von 50% minus 20px. In CSS wird das folgendermaßen berechnet:


    Code
    1. flex-basis: calc(50% - 20px);


    oder

    Code
    1. width: calc(50% - 20px);


    Da die Tabelle breiter werden kann sollte die rechte Spalte in ihrer Breite nicht fest bestimmt werden

    Code
    1. min-width: calc(50% - 20px);

    Oder wie die linke Spalte mit flex-basis und der Möglichkeit über flex-grow die Spaltenbreite über den Browser bestimmen zu lassen.

  • Hallo MrMurphy


    Danke für die Antwort.

    Diesmal sind das wirklich tabellarische Daten. ;) Auf der linken Seite kommt ein Bild und darunter ein Beschreibungstext. Auf der rechten Seite kommen dann technische Daten aus einer Datenbank, die in einer Tabelle angezeigt werden müssen. Hier passt das also mit der Tabelle, ansonsten gebe ich dir recht, Tabellen werden häufig missbraucht. Da in meiner Tabelle recht viele Daten vorkommen können, möchte ich also nur die Tabelle mit Scrollbars versehen, eine mobile Ansicht wird hier auch zu 100% nicht gebraucht.


    Habe heute leider keine Zeit mehr, ich kann erst morgen deine Hinweise testen.


    Danke und Gruß

    Biker

  • Ich hatte zunächst die Vermutung, dass die Tabelle irgend wie die Wirkung der Flex-Anweisungen aushebelt und hatte auch eine entspr. Diskussion bei Stackoverflow gefunden. Daher habe ich probeweise auf Grid umgestellt aber die Probleme waren die selben. Schließlich diese Diskussion, ebenfalls bei Stackoverflow gefunden:

    https://stackoverflow.com/ques…-with-overflowing-content

    Die Antwort dort von geon liefert die Lösung:

    Zitat

    Basically, to make a flexbox cell scrollable, you have to make all its parents overflow: hidden;, or it will just ignore your overflow settings and make the parent larger instead.

    Umgesetzt, et voila, keine Scrollbars am Fenster, die Matrix dagegen scrollbar auf beiden Achsen:

    Jetzt bin ich optimistisch, dass das auch mit einer Tabelle funktionieren wird ...