Introduction aux méthodes CSS pour corriger le bas de page (avec code)

Le contenu de cet article est une introduction à la méthode CSS pour corriger le bas de page (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Lorsque nous écrivons une page, nous constatons souvent que lorsque le contenu de la page est petit, le pied de page apparaît au milieu de la page ou quelque chose du genre ? Quoi qu'il en soit, il n'est pas affiché en bas. C'est moche de toute façon. La mise en page dont je parlerai ci-dessous consiste à résoudre comment faire coller les éléments en bas du navigateur.

Méthode 1 : Hauteur de pied de page fixe + positionnement absolu

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
}

Méthode 2 : Ajouter une valeur négative à la marge inférieure sur le contenu principal égal à la hauteur inférieure

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;
}

Méthode 3 : Définir la marge supérieure du pied de page à un nombre négatif

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;
}

Méthode 4 : en définissant flex, définissez la marge supérieure de le pied de page en auto

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;
}

Méthode 5 : Calculer la hauteur du contenu grâce à la fonction calc( )

Code HTML

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

Code CSS

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

Méthode 6 : En définissant flexbox, configurez le corps principal pour qu'il fléchisse

html

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

Code CSS

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

Méthode 7 : Utiliser la disposition en grille

Code HTML

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

Code CSS

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

Méthode 8 : affichage-*

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%;
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!