Sticky Footer模板布局

2022-04-04
2341

Sticky Footer

Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部,页面内容不够长的时候页脚黏在视窗底部,内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移,移动端特定布局也需要Sticky Footer来解决这些问题。

<!DOCTYPE html>

<html>

    <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></title>

        <style>
            .main {

                position: fixed;

                width: 100%;

                height: 100%;

            }


            .head {

                min-height: 100%;

            }


            .footer {

                position: absolute;

                margin: -64px auto 0 auto;

            }


            /*清除margin_top的塌陷和清除浮动*/


            .clearfix:before,

            .clearfix:after {

                content: "";

                display: table;

            }

            .clearfix:after {

                clear: both;

            }

            .clearfix {

                zoom: 1;

            }
        </style>

    </head>

    <body>

        <div>

            <div>

                内容

            </div>

            <div>

                底部

            </div>

        </div>

    </body>

</html>