利用CSS使footer固定在页面底部

时间:2022-11-12 07:56:41

1.HTML基本结构

<!DOCTYPEhtml>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

    <title>layout</title>

</head>

<body>

    <divclass="header">

        <h1>head of your website.</h1>

    </div>

    <divclass="wrapper">

        <divclass="content">

            <h2>Your website content here.</h2>

            <scripttype="text/javascript">

                for(var i = 0; i<100;i++){

                    document.write(i + "<br />");

                }

            </script>

        </div>

        <divclass="clear"><!-- 必不可少 --></div>

    </div>

    <divclass="footer">

        <div><h1>

            Copyright (c) 2012</h1></div>

    </div>

</body>

</html>

 

2.CSS样式

<styletype="text/css">

        *{

            margin: 0;/* 把默认值都设为0 */

        }

        html, body

        {

            height: 100%;

            width:85%;

            margin:0auto;/* 居中 */

        }

       

        .header

        {

            height:100px;

            background-color:Fuchsia;

        }

       

        .wrapper

        {

            min-height: 100%;/* IE6 hack*/

            height: auto!important;/* height优先级 */

            height: 100%;

            margin: 0auto-4em;/* 负值必须等于footer的高度 */

        }

       

        .content

        {

            background-color:Silver;

        }

       

        .clear/* 清除浮动 */

        {

            height: 4em; /* clearheight必须和footer的值样高 */

            clear:both;

        }

       

        .footer

        {

            height: 4em;

            background-color:Aqua;

        }

    </style>

 

3.运行


参考资料:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

 

利用CSS使footer固定在页面底部