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

最新推荐文章于 2022-05-25 08:45:01 发布

weixin_30627381

最新推荐文章于 2022-05-25 08:45:01 发布

阅读量56

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/aobingyan/p/3788671.html

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; /* clear的height必须和footer的值样高 */

            clear:both;

        }

       

        .footer

        {

            height: 4em;

            background-color:Aqua;

        }

    </style>

3.运行

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>test layout</title> <style type="text/css"> *{ margin: 0;/* 把默认值都设为0 */ } html, body { height: 100%; width:85%; margin:0 auto;/* 居中 */ } .header { height:100px; background-color:Fuchsia; } .wrapper { min-height: 100%;/* IE6 hack*/ height: auto !important;/* height优先级 */ height: 100%; margin: 0 auto -4em;/* 负值必须等于footer的高度 */ } .content { background-color:Silver; } .clear /* 清除浮动 */ { height: 4em; /* clear的height必须和footer的值一样高 */ clear:both; } .footer { height: 4em; background-color:Aqua; } </style> </head> <body> <div class="header"> <h1>head of your website.</h1> </div> <div class="wrapper"> <div class="content"> <h2>Your website content here.</h2> <span id="preserve33807f38a7944fcfb0f20ee485333534" class="wlWriterPreserve"><script type="text/javascript"> for(var i = 0; i<100;i++){ document.write(i + "<br />"); } </script></span> </div> <div class="clear"></div> </div> <div class="footer"> <div><h1> Copyright (c) 2012</h1></div> </div> </body> </html>

转载于:https://www.cnblogs.com/aobingyan/p/3788671.html