Comment implémenter le positionnement du pied de page en CSS (code complet)-tutoriel CSS-php.cn

Comment implémenter le positionnement du pied de page en CSS (code complet)

不言

Libérer： 2018-09-11 17:28:49

original

2232 Les gens l'ont consulté

Le contenu de cet article explique comment implémenter le positionnement du pied de page en CSS (code complet). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

CSS implémente le positionnement du pied de page

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="http://csdnimg.cn/public/common/libs/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
    <style>
        html,body{     
              width: 100%;            
              height: 100%;            
              margin: 0;            
              padding: 0;        
              }

        *{          
          margin: 0;            
          padding: 0;        
          }
        .box{   
                width: 100%;            
                min-height: 100%;            
                padding-bottom: 50px;            
                box-sizing: border-box;            
                background: #e4e4e4;        
                }
        .content{    
                background: #fff;            
                border-bottom: 1px solid #999;        
                }
        button{      
              margin: 10px auto;            
              line-height: 30px;            
              width: 20%;        
              }
        footer{       
             height: 50px;            
             line-height: 50px;            
             text-align: center;            
             margin-top: -50px;            
             background: #fff;        
             }
    </style>
    </head>
    <body>
    <div class="box">
        <button onclick="beLong()">变长</button>
        <p class="content" id="content">内容</p>
    </div>
    <footer>footer</footer></body><script>
    function beLong() {
        document.getElementById(&#39;content&#39;).style.height = &#39;1000px&#39;;
    }</script>
    </html>

Copier après la connexion

Recommandations associées :

Compréhension approfondie de l'utilisation de la transition dans CSS3

Comment implémenter la technologie de découpe d'image via Sprites en CSS (avec code)

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!