communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > Comment réparer le bas du pied de page

Comment réparer le bas du pied de page

一个新手
Libérer： 2017-09-20 10:27:39
original
4235 Les gens l'ont consulté


<!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>footer始终居于底部</title><style type="text/css">* { 
margin:0; padding:0; }
body { 
        font:14px/1.8 arial; }/*核心代码，html,body,wrap高度100%*/html, body, 
.wrapage { 
        height:100%; }/*外框高度自动，最小高度100%，ie下高度100%*/
.wrapage {    
        height:auto; 
    min-height:100%; 
    _height:100%; 
    background:#CCC; 
    color:#fff; 
    font-size:18px; 
    text-align:center; 
}/*内容主体下padding 防止底部叠加*/
.mainw { padding-bottom:80px; }/*底部相对定位，高度为主体的下padding,负margin值。*/
.footer { 
    position:relative; 
    height:80px; 
    margin-top:-80px; 

    background:#eee; 
    color:#fff; 
    font-size:16px; 
    text-align:center; 
}</style></head><body><p class="wrapage">
    <p class="mainw">
        <h1>页面高度不满，底部固定</h1>
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <br />
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p> 
        <p>页面高度不满，底部固定</p>
        <p>页面高度不满，底部固定</p>
        <br />
        <p>页面高度不满，底部固定</p>
        <br />   
    </p></p><p class="footer">
    <h1>页面高度不满，底部固定</h1>
   </p>
  </body>
</html>
Copier après la connexion

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!

Étiquettes associées：
固定 方法
source：php.cn
Article précédent：Comparez les différences entre les sélecteurs CSS3 :nth-child et :nth-of-type Article suivant：css+div cadre de base de mise en page typique
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
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2052
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2206
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1862
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1749
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1772
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