Wie erstelle ich ein einspaltiges CSS-Layout in voller Höhe mit Kopf- und Fußzeile?

Erstellen eines CSS-basierten einspaltigen Layouts mit Kopf- und Fußzeile

Im Bereich des CSS-Layoutdesigns besteht die Herausforderung beim Erstellen eines Es kann ein einspaltiges Layout mit fester Breite vorkommen, das sich über die gesamte Höhe der Seite mit Ausnahme der Kopf- und Fußzeile erstreckt. Um dieser Anforderung gerecht zu werden, wurden verschiedene Ansätze entwickelt, jeder mit seinen einzigartigen Vor- und Nachteilen.

Glücklicherweise ist in modernen Browsern (ab 2015) eine unkomplizierte und zuverlässige Lösung über die Eigenschaft display:flex zugänglich . Dieser Ansatz macht JavaScript überflüssig und bietet eine saubere und effiziente Alternative.

Die Lösung mit display:flex

Um das Layout mit display:flex zu implementieren, befolgen Sie diese Schritte:

1. Stellen Sie sowohl die HTML- als auch die Body-Elemente so ein, dass sie eine Höhe von 100 % haben, keine Polsterung und keine margin.
2. Wenden Sie die Eigenschaften display:flex und flex-direction:column auf das body-Element an. Dadurch werden die untergeordneten Elemente vertikal angeordnet.
3. Erstellen Sie ein #main-Element und setzen Sie seine Flex-Grow-Eigenschaft auf 1. Dadurch wird das Element erweitert, um den verbleibenden vertikalen Raum auszufüllen.
4. Verwenden die CSS-Eigenschaften „min-height“ und „background“, um die Kopf- und Fußzeile wie gewünscht zu gestalten.

Beispiel Code

html, body {height:100%; padding:0; margin:0; width:100%;}
body {display:flex; flex-direction:column;}
#main {flex-grow:1;}

/* optional */
header {min-height:50px; background:green;}
#main {background:red;}
footer {min-height:50px; background:blue;}

<header>header</header>
<div>

Durch die Verwendung dieser Technik ist es möglich, ein einspaltiges Layout zu erstellen, das die angegebenen Kriterien erfüllt und so die Kompatibilität mit modernen Browsern gewährleistet.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein einspaltiges CSS-Layout in voller Höhe mit Kopf- und Fußzeile?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!