zoukankan      html  css  js  c++  java
  • 利用CSS使footer固定在页面底部

    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/

    6927e7a5jw1drxat4aebwg

  • 相关阅读:
    Windows 7 Phone 文档数据库Rapid Repository正式发布
    Adobe展示HTML5动画制作IDE
    详解Android实现全屏正确方法
    qtform.com计划
    Adobe加速布局移动开发:Flash Builder+Flex+AIR+Catalyst
    预览:Visual Basic与C#中的异步语法
    Windows 7主题中的壁纸从哪里来?
    F#的编译器及标准库使用Apache 2.0协议开源(暂时还没有看到未来)
    开发者谈Symbian、iPhone、Android、MeeGo平台
    MeeGo 1.1发布
  • 原文地址:https://www.cnblogs.com/fanyong/p/2470032.html
Copyright © 2011-2022 走看看