J'ai regardé d'autres tutoriels sur la façon de rendre le pied de page au fond avec la grille CSS quand il y a peu de contenu. Mais je ne peux pas comprendre.
Si vous pouviez aider, ce serait génial. J'apprends la grille CSS et j'ai passé des jours sur et éteindre d'essayer de le comprendre. P>
p>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>3 Réponses :
Vous pouvez corriger le pied de page au bas de la fenêtre simplement en utilisant la hauteur p >
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" type="text/css" href="./css/style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Mortrix</title>
</head>
<body>
<div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
</body>
</html>
Solution super simple:
Ajoutez le code suivant à votre .footer code> Classe: <div class="grid">
<!-- Header -->
<div class="header">
<div class="title"> <h1>Mortrix</h1></div>
<div class="navigation">Navigation</div>
</div>
<!-- Main -->
<div class="main">
This is some content
</div>
<!-- Footer -->
<div class="footer">Footer
</div>
</div>
C'est une vieille question, mais voici ma solution de toute façon ...
J'ai utilisé des variables CSS pour le pied de page Hauteur et l'en-tête Hight. P>
main {
min-height: calc(100vh - (var(--footer-height) + var(--header-height)));
}
Numéro de typo, manquant
, ->html, corps (fermeture de la question)Allez-vous augmenter la quantité de contenu à une date ultérieure ou cette page n'a-t-elle toujours qu'une ligne ou deux (de contenu)?