Halten Sie auf der PC-Seite die Fußzeile unten, unabhängig davon, ob die Seite vollständig geöffnet ist oder nicht (keine Positionierung erforderlich).-CSS-Tutorial-php.cn

Halten Sie auf der PC-Seite die Fußzeile unten, unabhängig davon, ob die Seite vollständig geöffnet ist oder nicht (keine Positionierung erforderlich).

青灯夜游

Freigeben： 2018-10-10 16:22:53

nach vorne

2894 Leute haben es durchsucht

Ich habe kürzlich an einem Projekt gearbeitet und einige Seiten nahmen nicht einen Bildschirm ein, und die Fußzeile, die sich am unteren Rand befindet, war in der Nähe davon. Dies beeinträchtigte das Erscheinungsbild, also habe ich online gesucht und hier sind meine Ergebnisse

Der beste Weg, dieses Problem zu lösen, ist die Verwendung eines erweiterten Layoutmodells von CSS3: Flexbox, das ein anpassbares Layout erstellen kann.

Lassen Sie uns den folgenden Code ausführen

<body>
		<p id="header">...</p>
		<p id="content">...</p>
		<p class="footer">...</p>
	</body>

Nach dem Login kopieren

html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
}

#header{
   /* 我们希望 header 采用固定的高度，只占用必须的空间 */
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

#content{
   /* 将 flex-grow 设置为1，该元素会占用全部可使用空间 
      而其他元素该属性值为0，因此不会得到多余的空间*/
   /* 1 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 1 0 auto;
}

#footer{
   /* 和 header 一样，footer 也采用固定高度*/
   /* 0 flex-grow, 0 flex-shrink, auto flex-basis */
   flex: 0 0 auto;
}

Nach dem Login kopieren

Wir verwenden flex-deraction: Column, um die Seitenstruktur vertikal anzuordnen (Flex ist standardmäßig horizontal angeordnet) und ändern gleichzeitig die Höhe von Die HTML- und Body-Elemente werden auf 100 % gesetzt, sodass sie den gesamten Bildschirm ausfüllen.

Die drei in Flex enthaltenen Attribute werden oben verwendet:

Flex-Grow: Elemente können Platz im gleichen Container zuweisen Verhältnis, und Ausdehnungsverhältnis
flex-shrink: Wenn nicht genügend Platz vorhanden ist, wird das Schrumpfungsverhältnis des Elements
flex-basis: Die Skalierungsbasis von das Element Der Wert

bedeutet, dass die Kopf- und Fußzeile nur den Platz einnehmen, den sie einnehmen sollten, und der gesamte verbleibende Platz dem Hauptinhaltsbereich zugewiesen wird

Okay, Hier unabhängig von der Seite Unabhängig davon, ob der Inhalt groß oder klein ist, kann sichergestellt werden, dass die Fußzeile gehorsam unten bleibt.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS-Video-Tutorial , CSS3-Video-Tutorial !

Verwandte Empfehlungen:

PHP-Video-Tutorial zum Gemeinwohltraining

CSS-Online-Handbuch

CSS3 Online-Handbuch

Div/CSS-Grafik-Tutorial

Das obige ist der detaillierte Inhalt vonHalten Sie auf der PC-Seite die Fußzeile unten, unabhängig davon, ob die Seite vollständig geöffnet ist oder nicht (keine Positionierung erforderlich).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!