communauté
Apprendre
Bibliothèque d'outils
Outils d'IA
Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > CSS让footer保持在页面底部_html/css_WEB-ITnose

CSS让footer保持在页面底部_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Libérer： 2016-06-24 11:49:11
original
1094 Les gens l'ont consulté

序：当希望将footer保持在页面底部（即使页面内容高度低于窗口高度），可以尝试下面的方法..

 

1

<!DOCTYPE html><html lang="zh-cn"><head>  <meta charset="utf-8">  <title>CSS让footer保持在页面底部</title>  <style type="text/css">    * {      margin: 0;      padding: 0;    }    html, body {      height: 100%; /*让页面撑满窗口*/    }    .body {      min-height: 100%;      height: auto !important;      height: 100%; /*设置页面内容区域最小占满窗口高度*/      margin: 0 0 -41px; /*利用margin负值留出footer的区域(由于footer设置了1px的border，所以值在原有高度上+1)*/      text-align: center;    }    footer {      height: 40px;      line-height: 40px;      border-top: 1px solid #ddd;      text-align: center;    }  </style></head><body>  <div class="body">    <header>我是头部</header>    <div>我是内容</div>  </div>  <footer>我是页脚，我总是固定在页面底部</footer></body></html>

Copier après la connexion

 

作者：@zhnoah
出处：
本文版权归本人和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连 
接，否则保留追究法律责任的权利。

Étiquettes associées：
CSS让footer保持在页面底部
Article précédent：Discuz_X3.2_SC_UTF8这是什么东西？_html/css_WEB-ITnose Article suivant：HTML的DELETE和PUT应该怎么使用？_html/css_WEB-ITnose
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
javascript - Le code pour modifier l'image de la boîte dans la liste déroulante.
Depuis 1970-01-01 08:00:00
0
0
0
Comment ionic2 utilise-t-il les styles d'iOS sur la plateforme Android
Depuis 1970-01-01 08:00:00
0
0
0
javascript - Existe-t-il un excellent outil de point d'arrêt sur NPM?
Depuis 1970-01-01 08:00:00
0
0
0
javascript - Comment Webpack bloque-t-il globalement la valeur de hachage de cette build pour une utilisation par le code JS ?
Depuis 1970-01-01 08:00:00
0
0
0
javascript - Comment jQuery implémente-t-il le préchargement des effets sonores sur les pages mobiles?
Depuis 1970-01-01 08:00:00
0
0
0
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal