Maison > Article > interface Web > Côté PC, que la page soit entièrement ouverte ou non, conservez le pied de page en bas (aucun positionnement requis)

Côté PC, que la page soit entièrement ouverte ou non, conservez le pied de page en bas (aucun positionnement requis)

青灯夜游avant: 2018-10-10 16:22:542737parcourir

Je travaillais sur un projet récemment, et certaines pages n'occupaient pas un écran, et le pied de page, qui est en bas, en était proche. Cela affectait l'apparence, j'ai donc cherché en ligne et voici mes résultats <.>

La meilleure façon de résoudre ce problème est d'utiliser un modèle de mise en page avancé fourni par CSS3 : flexbox, qui peut créer une mise en page adaptable.

Voici comment fonctionne notre code

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

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

Nous utilisons flex-deraction: column pour organiser la structure de la page verticalement (flex est disposé horizontalement par défaut), et au En même temps, la hauteur du code HTML et de l'élément body est définie à 100 %, ce qui lui permet de remplir tout l'écran.

Les trois attributs inclus dans flex sont utilisés ci-dessus. Laissez-moi vous présenter leurs utilisations :

flex-grow : les éléments peuvent allouer de l'espace dans le même ratio d'allocation de conteneur, et taux d'expansion
flex-shrink : Si l'espace est insuffisant, le taux de retrait de l'élément
flex-basis : La base de mise à l'échelle de l'élément La valeur

signifie que l'en-tête et le pied de page n'occupent que l'espace qu'ils devraient occuper, et tout l'espace restant est donné à la zone de contenu principale

D'accord, ici, quelle que soit la page. Que le contenu soit grand ou petit, le pied de page peut être assuré de rester docilement en bas.

Résumé : Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo CSS , Tutoriel vidéo CSS3 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Manuel en ligne CSS3

Tutoriel graphique div/css

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Résumé des unités CSS (telles que rem, px, em, vw, vh, vm)Article suivant：Résumé des unités CSS (telles que rem, px, em, vw, vh, vm)

Articles Liés

Voir plus