Einführung in CSS-Methoden zum Korrigieren des Seitenendes (mit Code)

Dieser Artikel bietet Ihnen eine Einführung in die CSS-Methode zum Korrigieren des Seitenendes (mit Code). Ich hoffe, dass er Ihnen als Referenz dienen wird .

Wenn wir eine Seite schreiben, stellen wir oft fest, dass bei kleinem Seiteninhalt die Fußzeile in der Mitte der Seite ragt oder so? Wie auch immer, es wird sowieso nicht am unteren Rand des Browsers angezeigt. Das unten besprochene Layout besteht darin, die Elemente am unteren Rand des Browsers festzuhalten Fußzeilenhöhe + absolute Positionierung

html

<div class="dui-container">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>

CSS

.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

Methode 2: Fügen Sie am unteren Rand des Hauptinhalts einen negativen Wert hinzu, der gleich ist die untere Höhe

HTML

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}

Methode 3: Setzen Sie den oberen Rand der Fußzeile auf eine negative Zahl

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}

Methode 4: Stellen Sie den oberen Rand der Fußzeile durch Festlegen von Flex auf „Auto“ ein

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}

Methode 5: Berechnen Sie die Höhe des Inhalts mit der Funktion calc()

HTML-Code

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS-Code

main{
min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}

Methode 6: Pass Flexbox einrichten und Hauptteil auf Flex einstellen

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS-Code

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}

Methode 7: Rasterlayout verwenden

Html-Code

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS-Code

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
}

Methode 8: display-*

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

CSS

body {
  min-height: 100%;
  display: table;
  width: 100%;
}
main {
  display: table-row;
  height: 100%;
}

Das obige ist der detaillierte Inhalt vonEinführung in CSS-Methoden zum Korrigieren des Seitenendes (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!