Vier Vierecke im Vollbild anpassbar

  • Hallo liebe HTML-Freunde,


    ich habe - ich glaube ein simples - Problem kann es aber einfach nicht lösen.


    ich habe eine Navigationsleiste und unter der Navigationsleiste sollen vier divs sein und zwar im Vollbild und immer im Vollbild bleiben. Ich habe mal versucht das grafisch darzustellen. Das was rot ist kriege ich nicht hin.

    [Blockierte Grafik: https://image.ibb.co/b7XAQS/vollbild.jpg]



    Hier der aktuelle Quellcode:

    https://jsfiddle.net/FCS2018/3Lfyz1qL/


    habt ihr einen Tipp für mich?

    ich habe gelesen das es mit Flexboxen am modernsten ist, ich habe es mit Flexboxen auch in der Breite immer hinbekommen aber in der höhe passen Sich die Fenster nicht an.


    Achja mit display grid habe ich es auch versucht, aber leider bekomme ich es auch nicht auf vollbild.

  • Ja genau am Ende soll es so aussehen, du hast da jetzt das mit Flexbox und in row gemacht.

    Wie hast du erzielt das es automatisch so hoch ist?


    so habe jetzt mal getestet:

    Es geht in die Richtung in die ich es brauche aber es soll im Vollbild sein und nicht darüber hinaus gehen.

    Also jede box 50% weit und 50% hoch ABER oben ist ja noch die Navigation also sind es insgesamt in der höhe 100%-80px.

  • Schau mal, ob dies das ist, was Du dir vorstellst:

  • Also jede box 50% weit und 50% hoch ABER oben ist ja noch die Navigation also sind es insgesamt in der höhe 100%-80px.


    Nur das mit deine Navi verstehe ich nicht. Sollen die 80 pixel vom navi mit in den obrigen 50% mit rein?

    also

    oben boxen 50% -80pixel

    unten 50 %

    oder soll erst navi dann oben 50% und untenn 50% sein ?.

    Die Variante von Sempervivum sollte zutreffend sein wenn du 80pixel + 50% + 50% haben willst .

    Die Boxen nehmen immer Vollbild ein und gehen nicht hinüber hinaus

  • genau basti1012 das was Sempervivum geschrieben hat klingt sehr einleuchtend ich werde es sofort testen wenn ich Zeit habe und mal die Navigation mit einbauen.


    ich möchte 80px + 50% + 50%, und Huhu das hatte ich schon probiert aber dann stimmt das Logo nicht immer obwohl ich da auch mit % gearbeitet habe.

  • Ich glaube wir reden alle von was anderen.

    Aber ich glaube Sempervivum hat recht ,fals ich flex richtig verstehe.

    djheke meint ja das von den oberen 50% noch 80pixel abgezogen werden muß ,damit der obere Teil (Inclusive nav 50% hat).Wo wie ich es verstehe der TE auch haben will.

    Sempervivum ,macht dein Code das ?

    Weil ich verstehe die Zeile nicht ganz flex: 1 1 10px;

    1 und 1 teilt die wolle Breite und höhe ein.Also wenn es sich mit anderen Elementen den Platz Teilen muß.

    Aber was machen die 10 pixel da ?

    Aber die zb 80 Pixel( VOM NAV ) sind jetzt nicht mit in den obrigen 50% drinne oder sehe ich das wieder falsch???


    Wäre gut wen nder TE sich mal meldet wi er das jetzt genau meint

  • Zitat

    macht dein Code das ?

    Das sieht man sofort, wenn man sich mein Beispiel in Aktion ansieht: Die vier Boxen füllen den Raum unterhalb der Navi vollständig aus, ohne dass man selbst irgend etwas berechnen muss. Man kann die Navi beliebig anlegen, mit fester oder automatischer Höhe, und der Browser füllt mit den zwei Boxenreihen immer den freien Raum darunter aus.


    https://css-tricks.com/snippets/css/a-guide-to-flexbox/ sagt:

    Zitat

    flex

    This is the shorthand for flex-grow, flex-shrinkand flex-basis combined. The second and third parameters (flex-shrink and flex-basis) are optional. Default is 0 1 auto.

  • Ja das ist richtig mit den kompletten ausfüllen.Das ist ja so gewollt und gut .

    Aber wir meinen ja die navigation. die ist ja jetzt überhalb der 4 boxen . die obere Reihe nimmt 50% ein und die untere Reihe 50%.

    Aber wo steht die NAVI .Mit in den oberen 50% ,oder auserhalb der 50% ?.

    Deswegen wollte ich ja noch wissen wie der TE das genau meint.

    wenn dan so


    Code
    <div  id="wrapper">100%
    <div>50%
    <nav>80pixel</nav>
    </div>
    <div>
    50%
    </div>
    </div>

    oder

    Code
    <div id ="wrapper">100%
    <nav> 80 pixel</nav>
    <div>50%</div>
    <div>50%</div>
    </div>

    Jo die Zwei möglich keiten stehen im Raum.

    Oder ich habe wieder ein gewalltig an der Birne und denke Heute wieder nur schrott:(

  • Entschuldigt bitte,


    ich bin momentan sehr eingespannt. Vielen Dank für eure Mühe ihr habt ja jetzt beide Lösungen schon durchgekaut.


    Also haben wollte ich 80px und der Rest dann durch zwei, also soweit ich den Code überflogen habe ist das aber genau das was ich brauche.



    Habe mir jetzt schnell die Zeit genommen um eure Mühen zu schätzen: Vielen Dank das ist genau das was ich gesucht habe.

    Jetzt brauche ich nur noch ein Media Query damit alle Boxen übereinander sind, das müsste doch gehen indem ich


    Code
    .line {
        flex: irgendwas hier ändere;
        display: flex;
    }


    Oder?

  • Das hat Ideal funktioniert, ich verfeinere noch etwas den Code damit die Smartphoneansicht auch passt und dann lade ich diesen mal hoch.


    Also ich komme jetzt leider doch noch nicht ganz weiter. Also ich habe flex-direction: auf column gestellt und schon war die Smartphoneansicht da.

    Aber jetzt passt der Abstand vom ersten div nicht mehr das sind keine 25% vom Rest. Bedeutet die Navigation wird auf einmal ins erste div gerechnet.

    https://jsfiddle.net/FCS2018/ujr9zLbq/4/

  • Entschuldigt bitte für den Doppelpost aber ich glaube es sieht keiner wenn ich was bearbeite, ich bräuchte bitte mal nochmal Hilfe.


    Also ich komme jetzt leider doch noch nicht ganz weiter. Also ich habe flex-direction: auf column gestellt und schon war die Smartphoneansicht da.

    Aber jetzt passt der Abstand vom ersten div nicht mehr das sind keine 25% vom Rest. Bedeutet die Navigation wird auf einmal ins erste div gerechnet.

    https://jsfiddle.net/FCS2018/ujr9zLbq/4/

  • Das liegt daran, dass Du position:absolute bzw. position:fixed für den Header verwendest - immer wieder eine Quelle für Probleme. Die Navi wird nicht in das erste Div gerechnet sondern sie überdeckt dieses und es sieht so aus, als ob seine Höhe zu klein sei.

  • Einfach die position-Angaben weg lassen.

    Zitat

    als was macht man dann die Navigation auch als flex das ich die Seite in drei Lines aufbaue?

    Weiß nicht genau, ob ich das richtig verstehe: Du möchtest drei statt zwei Zeilen? Dann brauchst Du nur eine dritte Zeile hinzu zu fügen. Oder meinst Du drei Zeilen einschl. Navi?

  • ich meinte jetzt drei Zeilen einschließlich Navi, also:


    NAVI

    LINE1 box box

    LINE2 box box


    und in der Smartphone Ansicht wird ja LINE1 und LINE2 ungebdrochen in


    NAVI

    LINE1 box

    LINE1 box

    LINE2 box

    LINE2 box


    macht das überhaupt Sinn? oder was sagst du wie ich das Konstrukt verändern sollte damit es funktioniert.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!