Maison > Article > interface Web > Tutoriel pratique CSS pour fixer le pied de page en bas de page

Tutoriel pratique CSS pour fixer le pied de page en bas de page

高洛峰original: 2017-03-10 11:05:131942parcourir

Cet article présente principalement la pratique CSS actuelle consistant à corriger le pied de page en bas de la page. Faites attention au problème de la suppression des flottants CSS. Les amis dans le besoin peuvent se référer à

La position du pied de page<.>

Le pied de page d'une page Web est l'endroit où les liens d'aide et les informations de droits d'auteur sont généralement placés. Le pied de page doit naturellement être situé au bas de la page, mais selon la pratique générale, si le contenu de la page Web avant le pied de page est relativement petit, ou si un moniteur avec une résolution verticale plus grande est utilisé, le pied de page peut ne pas apparaître. la page. La situation en bas est la suivante.

Étant donné que le pied de page est fondamentalement une partie commune à toutes les pages d'un site Web, le contenu des différentes pages varie, il est donc effectivement possible que certaines pages n'aient pas suffisamment de contenu .De telles questions. De plus, notamment pour les pieds de page contenant des couleurs d’arrière-plan, ce problème affectera sérieusement l’apparence.

Nous souhaitons donc que le pied de page soit positionné exactement en bas, quelle que soit la quantité de contenu sur la page.

Comment fixer le pied de page en basUn positionnement absolu est-il possible ?

Peut-être que quelqu'un a pensé à régler le pied de page sur position:fixed puis à le positionner en bas. Indépendamment d'IE6, qui ne supporte pas cette valeur d'attribut, en effet, si le contenu de la page Web elle-même est suffisant, cette façon d'écrire fera apparaître le pied de page en bas du navigateur dès le début, et lors du défilement du page Web, le pied de page apparaîtra en bas du navigateur et restera dans sa position d'origine. Cet effet ne convient évidemment pas à la plupart des sites Web.

Comme vous pouvez l'imaginer, l'effet dont nous avons besoin est le suivant :

Lorsque la page Web a beaucoup de contenu, vous ne verrez que le pied de page inférieur lorsque vous faites défiler vers le bas.

Lorsque le contenu de la page Web est petit, le pied de page est toujours situé en bas de la page entière, laissant le reste vide.

Méthode d'implémentation conventionnelle et simple

CSS Sticky Footer fournit une méthode d'implémentation raisonnable pour corriger le pied de page en bas. Cependant, d'une part, il s'agit d'un site anglais, et d'autre part, la méthode d'écriture qu'il propose peut encore être améliorée, cet article fera donc référence à son contenu et donnera une méthode de mise en œuvre raisonnable.

Vous avez d'abord besoin d'une telle structure HTML :

<body>  
    <p class="wrapper">  
        <!--网页内容-->  
        <p class="footer_placeholder"></p>  
    </p>  
    <p class="footer">  
        <!--页脚-->  
    </p>  
</body>

p.wrapper est le conteneur externe de tout le contenu de la page Web, à l'exception du pied de page, du pied de page p . le pied de page est au même niveau que lui. p.footer_placeholder doit être placé à la fin de tout le contenu de la page Web, c'est-à-dire comme dernier élément enfant de p.wrapper. Sa fonction sera expliquée plus tard.

Ensuite, écrivez le CSS et expliquez-le tour à tour.

html, body{height:100%;}

Lorsque le contenu de la page Web est insuffisant, la hauteur réelle du corps et du HTML peut être inférieure à la plage visible du navigateur, écrivez donc la hauteur de 100 % pour le corps et le HTML. De plus, les éléments enfants directs suivants utiliseront également la méthode d'écriture en pourcentage. La méthode d'écriture en pourcentage doit être valide uniquement lorsque l'élément parent direct a une certaine définition de hauteur.

.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}

Tout le contenu Web est dans ce p.wrapper, et la hauteur minimale est définie (IE6 utilise un hack puisque l'élément parent de cet élément est le corps avec 100). % hauteur définie, par conséquent, quelle que soit la quantité de contenu, la hauteur de l'élément p.wrapper occupera toute la plage visible du navigateur. Ensuite, en fonction de la hauteur du pied de page, définissez des valeurs négatives égales pour la marge inférieure, afin que le pied de page apparaisse exactement à la fin du contenu de la page.

.footer, .footer_placeholder{height:120px;}    /*假定页脚的高度为120px*/

p.footer_placeholder, comme littéralement, l'élément placeholder du pied de page, c'est juste un p vide, la hauteur de définition est la même que celle du pied de page, il existe pour donner Le pied de page laisse de la place. Sans cela, quelque chose comme ceci pourrait arriver ↓

Tutoriel pratique CSS pour fixer le pied de page en bas de page

À ce stade, le pied de page fixé en bas a été implémenté. La somme des parties CSS est :

html, body{height:100%;}   
.wrapper{   
    min-height:100%;   
    _height:100%;   
    margin-bottom:-120px;   /*假定页脚的高度为120px*/  
}   
.footer, .footer_placeholder{height:120px;}   
  
如果还需要考虑css初始化和清理浮动，可能你还需要添加下面这部分css：   
  
body{margin:0;}   
.footer_placeholder{clear:both;}

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：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser CSS pour centrer les éléments flottantsArticle suivant：Comment utiliser CSS pour centrer les éléments flottants

Articles Liés

Voir plus