HTML+CSSベースfooterの2つの固定方式

1879 ワード

原文:https://blog.csdn.net/xianglikai1/article/details/78411615
Webページでよく見られる下部バーには、現在2種類あります.
一、永久に固定して、ページの内容がどんなに高くても、footerはずっとブラウザの一番下に位置して、モバイル端の下部のメニューを作るのに適して、これは比較的に実現しやすいです;




    
    
    <meta charset="utf-8"/>
    <style>
        body {
            padding-bottom: 50px;
        }
 
        .footer {
            position: fixed;
            left: 0px;
            bottom: 0px;
            width: 100%;
            height: 50px;
            background-color: #eee;
            z-index: 9999;
        }
    </style>


      ，         <br/>
 
    <div class="footer">     </div>


</code></pre> 
 <p> 、    ，               ，footer        ，        ，               ，footer          ，         ；</p> 
 <pre><code>


    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title/>
    <meta charset="utf-8"/>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
 
        html, body {
            height: 100%;
        }
 
        .footer {
            margin-top: -50px;
            height: 50px;
            background-color: #eee;
            z-index: 9999;
        }
 
        .wrap {
            min-height: 100%;
        }
 
        .main {
            padding-bottom: 50px;
        }
    </style>


    <div class="wrap">
        <div class="main">
              ，         <br/>
 
        </div>
    </div>
    <div class="footer">     </div>


</code></pre> 
</article>
                            </div>
                        </div>

読み書きロックの優先度の問題が解決しました

shell自動処理ファイル内部操作