Vier Vierecke im Vollbild anpassbar

vic951

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.

basti1012

Soll das irgendwie so aussehen ?

* Link entfernt , weil existiert nicht mehr *

Weil blicke da noch nicht ganz durch

vic951

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.

Huhu

Vergib doch einfach Prozent für die Navigation.

Sempervivum

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

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>

<body>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #wrapper {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        nav {
            font-size: 2em;
            background-color: lightblue;
        }
        .line {
            flex: 1 1 10px;
            display: flex;
        }
        .box {
            border: 2px solid blue;
            flex: 1 1 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        .line:first-of-type .box:first-child {
            background-image: url(images/dia0.jpg);
            background-size: cover;
        }
        .line:last-of-type .box:last-child {
            background-image: url(images/dia1.jpg);
            background-size: cover;
        }
        
    </style>
    <div id="wrapper">
        <nav>
            Hier die Navigation
        </nav>
        <div class="line">
            <div class="box">
            </div>
            <div class="box">
                Der Text<button>Der Button</button>
            </div>
        </div>
        <div class="line">
            <div class="box">
                Der Text<button>Der Button</button>
                </div>
            <div class="box">
            </div>
        </div>
    </div>
</body>

</html>

Alles anzeigen

basti1012

Zitat von vic951

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

vic951

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.

djheke

Bin zu faul zum Lesen, aber es konnte doch calc() reichen.

Sempervivum

Nein, wenn man Flexlayout richtig einsetzt, braucht es kein calc. Siehe mein Beispiel.

basti1012

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

Sempervivum

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.

basti1012

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

vic951

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?

Sempervivum

Ja, so sollte es gehen:

Code

.line {
    flex-direction: column;
    display: flex;
}

vic951

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/

vic951

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/

Sempervivum

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.

vic951

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

bzw. wie mache ich es richtig?

Sempervivum

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?

vic951

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

LINE2 box

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

flex

Jetzt mitmachen!