Bootstrap CSS DIV Höhe

  • Hallo Miteinander,


    bin gerade etwas am verzweifeln. Ich muss eine Ansicht mit vier Spalten erstellen, jede Spalte hat weitere DIVs, soweit kein Problem.

    Jetzt sollten sich allerdings die einzelnen Spalten, als auch die darin liegenden DIVs immer der größe nach anpassen, so dass alle Inhalte

    immer schön nebeneinander stehen:


    Hat jemand eine Idee? Habs schon über ein Javascript getestet, als auch mit row-eq-height. Das Ergebnis hatte mir allerdings nicht gefallen.


    VG

    Fisi

  • Ich bleibe jetzt beim Script:


  • Wenn nur alle Divs innerhalb einer Zeile die gleiche Höhe haben sollen, wäre es ausreichend, diese entsprechend in ".row"s zu verpacken:


    Ggf. zusätzlich noch die Höhe der einzelnen Divs auf 100% setzen:

    Code
    1. .col-sm-12 {
    2. height: 100%;
    3. }


    http://jsfiddle.net/ysbfcj8L/

  • Neben Flexbox kann man es auch noch mit "vh"als Hoeheneinheit probieren.

    Eventuell dann überhaupt mit "calc(1rem + 12vh);" (Hausnummer, somit hat man die min-height quasi inkludiert).

    Mit altem CSS 2 wäre der Trick gewesen, body und html als display table mit einer height 100% zu definieren und das zu vererben. Das war aber nicht zuverlässig und ein PITA.


    Flexboxen sind definitiv die bessere Wahl. Eventuell ginge es sonst noch via grid layouts.

  • Vielen Dank für eure Antworten.

    Flexboxen kannte ich schon. Ich habe die Ansicht jetzt komplett anders gestaltet, dann fällt mein Problem weg.


    Ich werfe mal Semantic in den Raum. Das macht viele Sachen besser als Bootstrap.


    https://semantic-ui.com/


    Ansonsten, wie Gunah erwähnt hat: Flexboxen

    H6G : Danke für den Tipp, kannte ich bisher noch nicht, sieht aber gut aus. Werde ich mir auf alle Fälle näher anschauen.


    VG


    Fisi

  • Ich werde jetzt nicht anfangen mir dafür Node zu installieren?

    node musst du dir nur installieren, wenn du etwas an den Themes ändern möchtest oder Einstellungen in den SASS-Templated vornimmst.

    Ansonsten gibt es vorkompilierte .js und .css Dateien + die dazugehörigen minified Versionen: https://github.com/Semantic-Or…UI-CSS/archive/master.zip



    Gibt es da ein paar Examples wie man eine kleine Seite damit baut?

    Na klar:


    https://semantic-ui.com/usage/layout.html

    https://semantic-org.github.io/example-github/ (ein Nachbau des Github Themes)

  • Hay,

    Ich werde jetzt nicht anfangen mir dafür Node zu installieren?

    wenn ich das richtig sehe, dann gibt es "vorkompilierte" CSS - und die kann man einbinden wir jQuery oder Bootstrap. Du bist dann natürlich auf das default theme beschränkt, was für die meisten Webseiten allerdings ausreicht.


    CU, Peter

  • Uff, ok, danke.