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

  • 相关阅读:
    在ubuntu上搭建turnserver
    如何将R包安装到自定义路径
    R读取MySQL数据出现乱码,解决该问题的方法总结
    利用百度API(js),通过地址获取经纬度的注意事项
    通过地址获取经纬度的三种方法; 通过经纬度获取省市的方法
    软件工程-第一周作业汇总
    软件工程作业-采访本课程往届学生记录
    动手实现混合四则运算
    历年学生软件作品点评
    软件工程-东北师大站-第一次作业
  • 原文地址:https://www.cnblogs.com/fanyong/p/2470032.html
Copyright © 2011-2022 走看看