Maison > Questions et réponses > le corps du texte
J'ai la structure suivante :
<body>
<div id="main-wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<footer>
</footer>
</div>
</body>
J'utilise javascript pour charger dynamiquement le contenu dans
P粉3443557152024-01-22 14:23:30
Sticky Footer de Ryan Fait est une solution simple que j'ai utilisée à plusieurs reprises dans le passé.
HTML de base :
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class="content"></div>
<div class="push"></div>
</div>
<div class="footer"></div>
CSS :
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Traduisez ceci en quelque chose de similaire à ce que vous avez déjà obtenu, à peu près comme ceci :
HTML :
<body>
<div class="wrapper">
<header>
</header>
<nav>
</nav>
<article>
</article>
<div class="push"></div>
</div>
<footer>
</footer>
</body>
CSS :
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
N'oubliez pas de mettre à jour les nombres négatifs sur les marges d'emballage pour qu'ils correspondent à la hauteur du pied de page et de pousser div. Bonne chance!
P粉9707363842024-01-22 10:09:20
Le Sticky Footer de Ryan Fait est très bon, mais j'ai trouvé qu'il manquait de structure de base*.
Si vous avez la chance d'utiliser Flexbox sans prendre en charge les anciens navigateurs, les pieds de page collants sont vraiment simples et supportent le redimensionnement dynamique des pieds de page.
L'astuce pour faire coller le pied de page vers le bas à l'aide de Flexbox est de faire plier verticalement les autres éléments du même conteneur. Tout ce dont il a besoin c'est d'un élément frère avec display: flex 的全高包装元素和至少一个 flex 值大于 0 :
<子>CSS :
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
article {
flex: 1;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#main-wrapper {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100%;
}
article {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
header {
background-color: #F00;
}
nav {
background-color: #FF0;
}
article {
background-color: #0F0;
}
footer {
background-color: #00F;
}<div id="main-wrapper">
<header>
here be header
</header>
<nav>
</nav>
<article>
here be content
</article>
<footer>
here be footer
</footer>
</div>