Gunnar Bittersmann: Layout mit flex-box

Beitrag lesen

@@var

Vorweg: Ich habe mich entschlossen, den gesamten Inhalt doch in ein <div class="wrap"> einzuwickeln und als Bezugsrahmen nicht <body> zu nehmen, da ich - sofern Browserunterstützung besteht - den Hintergrund der Seite mittels WebGL gestalten (und animieren) will, also mit einem <canvas> - und das sollte das Browserfenster nach Möglichkeit vollständig ausfüllen (body > canvas { width: 100%; height: 100%; }).

Das ist kein hinreichender Grund für den div-Container. Du kannst canvas absolut positionieren; das bezieht sich immer noch auf den Viewport, wenn du nicht gerade body positioniest.

Nebenbei: <header> und <footer> sind Teil einer Klasse, da ich innerhalb meiner <article> noch mehr Elemente von der Sorte habe und ich den CSS-Code dadurch lesbarer finde...

Das ist gar kein Grund für Klassen. Du kannst Seitenheader und -footer als body > header bzw. body > footer selektieren. Das macht den CSS-Code lesbarer, weil man gar nicht ins HTML kucken muss, um ihn zu verstehen.

LLAP

--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
0 45

Layout mit flex-box

var
  • css
  • design/layout
  1. 0
    Matthias Scharwies
    1. 0
      var
      1. 0
        Matthias Scharwies
  2. 0
    Gunnar Bittersmann
    1. 1
      Gunnar Bittersmann
      1. 0
        Gunnar Bittersmann
        1. 0
          juli
          • browser
          • css
          • design/layout
          1. 0
            Matthias Scharwies
            1. 0

              Layout mit flex-box, zeig doch mal bitte vollständig

              juli
              • browser
              • css
              • zu diesem forum
              1. 0
                Gunnar Bittersmann
                1. 0

                  URI oder URL

                  dedlfix
                  • internet
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      dedlfix
                      1. 0
                        Gunnar Bittersmann
                    2. 0
                      Matthias Apsel
      2. 0
        juni
        1. 0
          Matthias Scharwies
    2. 0
      var
      1. 0
        Matthias Apsel
        1. 0
          var
          1. 0
            Matthias Apsel
          2. 0
            Gunnar Bittersmann
            • zu diesem forum
            1. 0
              var
      2. 0
        Gunnar Bittersmann
        • css
        • html
        1. 0
          var
      3. 0

        "flex-basis: auto" war der Übeltäter!

        var
        1. 0
          Matthias Scharwies
          1. 0
            var
            1. 0
              Tabellenkalk
            2. 1
              Matthias Apsel
              1. 0
                var
              2. 0

                Conditional Comment sinnlos

                var
                1. 0
                  Matthias Scharwies
                  1. 0
                    Matthias Scharwies
                    1. 0
                      var
                      1. 0
                        Gunnar Bittersmann
                        • browser
                        • css
                2. 1
                  Gunnar Bittersmann
                  • barrierefreiheit
                  • css
                  • html
                  1. 0
                    Gunnar Bittersmann
                    • barrierefreiheit
                    • html
                    1. 0
                      var
                      1. -2
                        MrMurphy1
                        1. 0
                          Gunnar Bittersmann
                          • css
                          • html
                          1. 0
                            Matthias Apsel
            3. 0
              Matthias Scharwies
          2. 0
            Gunnar Bittersmann