CSS: Wie Inhalt zwischen Header setzen und Fußzeile

Question

I einer Seite mit 3 Sektionen zu tun:

• Kopf (Seitenanfang)
• Footer (unten von der Seite)
• Inhalt - Zwischen Kopfzeile und Fußzeile ohne Bildlaufleiste (ist eine Broschüre). Der Inhalt beginnt am Ende des Headers und endet am Anfang der Fußzeile.

In diesem Moment habe ich position:fixed die Kopfzeile und die Fußzeile.

Welche CSS-Regeln muss ich in den Inhalt hinzufügen, um zwischen diesen 2 Abschnitten anzupassen?

Mein Problem ist, dass Wenn ich die Höhe des Inhalts in Pixel anpassen funktioniert nicht auf jedem Bildschirm, nur in meinem.

header, 
 
footer { 
 
    position: fixed; 
 
    height: 30px; 
 
    width: 100%; 
 
} 
 
header { 
 
    background-color: red; 
 
    top: 0; 
 
} 
 
footer { 
 
    background-color: blue; 
 
    bottom: 0; 
 
} 
 
section { 
 
    background-color: black; 
 
    margin-top: 30px; 
 
    overflow: hidden; 
 
    height: 300px; /*But this is not working in all screens! */ 
 
    width: 100%; 
 
}

<header></header> 
 
<section></section> 
 
<footer></footer>

Vielen Dank!

Answer 1

In diesem Beispiel verwende ich 30px für die Kopfzeile und 30px für die Fußzeile. Verwenden Sie diesen Code:

section { 
    height: calc(100vh - 60px); 
    top: 30px; 
} 

Es berechnet 100vw (Ansichtsfenster Höhe ähnlich Prozent) minus 60px (30px für den Header, 30 für die Fußzeile) und dann ist es Position direkt unter dem Header ist.

Ich hoffe, das funktioniert für Sie.