How to implement footer positioning in css (complete code)-CSS Tutorial-php.cn

How to implement footer positioning in css (complete code)

不言

Release： 2018-09-11 17:28:49

Original

2229 people have browsed it

The content of this article is about how to implement footer positioning in CSS (complete code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS implements footer positioning

<!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>

Copy after login

Related recommendations:

In-depth understanding of how to use transition in CSS3

How to implement image cutting technology through Sprites in CSS (with code)

The above is the detailed content of How to implement footer positioning in css (complete code). For more information, please follow other related articles on the PHP Chinese website!