Heim > Web-Frontend > CSS-Tutorial > So implementieren Sie die Fußzeilenpositionierung in CSS (vollständiger Code)

So implementieren Sie die Fußzeilenpositionierung in CSS (vollständiger Code)

不言
Freigeben: 2018-09-11 17:28:49
Original
2232 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Implementierung der Fußzeilenpositionierung in CSS (vollständiger Code). Ich hoffe, dass er für Freunde hilfreich ist.

CSS implementiert die Fußzeilenpositionierung

<!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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Detailliertes Verständnis der Verwendung von Übergängen in CSS3

So implementieren Sie Bildschneidetechnologie durch Sprites in CSS (mit Code)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Fußzeilenpositionierung in CSS (vollständiger Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage