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 = ; i<;i++){

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

                }

            </script>

        </div>

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

    </div>

    <divclass="footer">

        <div><h1>

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

    </div>

</body>

</html>

2.CSS样式

<styletype="text/css">

        *{

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

        }

        html, body

        {

            height: %;

            width:%;

            margin:0auto;/* 居中 */

        }

        .header

        {

            height:100px;

            background-color:Fuchsia;

        }

        .wrapper

        {

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

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

            height: %;

            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>

利用CSS使footer固定在页面底部的更多相关文章

  1. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  2. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  3. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  4. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

  5. 在不适用fixed的前提下，当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

  6. Footer固定在页面底部(CSS)

    <style type="text/css"> #wapper{ position: relative; /*重要!保证footer是相对于wapper位置绝对*/ h ...

  7. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  8. 使用css方法使footer保持在页面的最底部

    使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...

  9. 页面元素固定在页面底部的纯css代码（兼容IE6）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 廖雪峰Java11多线程编程-2线程同步-1同步代码块

    1.线程安全问题 多个线程同时运行,线程调度由操作系统决定,程序本身无法决定 如果多个线程同时读写共享变量,就可能出现问题 class AddThread extends Thread{ public ...

  2. 廖雪峰Java10加密与安全-3摘要算法-4BouncyCastle

    1.BouncyCastle: 第三方提供的一组加密/哈希算法 提供JDK没有提供的算法 RipeMD160哈希算法 官方网站 2.如何使用第三方提供的算法 2.1 添加第三方jar至classpat ...

  3. css的其他相关样式属性

    一.颜色 1.预定义的表示颜色的单词 red,black.gray,pink...... 2.16进制表示 # + 6位16进制的数字0 1 2 3 4 5 6 7 8 9 a b c d e f 如 ...

  4. C语言函数指针和回调函数

    彻底搞定C指针-函数名与函数指针 函数名&函数名取地址 函数指针 通常我们可以将指针指向某类型的变量,称为类型指针(如,整型指针).若将一个指针指向函数,则称为函数指针. 函数名的意义 函数名 ...

  5. mysql数据库引擎（转载）

    数据库引擎介绍 MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另 ...

  6. Python - 基本数据类型及其常用的方法之列表

    列表: 特点:用 [] 括起来,切元素用逗号分隔:列表内的元素可以为任何的数据类型. 列表的基本操作: 1.修改 li = [12, 5, 6, ["Aiden", [2, 4], ...

  7. Python基础---控制执行流程

    一.if语句 1.if语句 作用:让程序根据条件选择性地执行某条语句或某些语句 说明:if语句又叫条件语句,也叫分支语句 语法: if 真值表达式1: 语句块1 elif 真值表达式2: 语句块2 . ...

  8. 作业test

    views Car <template> <div class="car"> <Nav/> <div class="wrap&q ...

  9. Chapter 1 线性表

    Preface: 这部分主要是我考研之前的总结,留作以后用到时再翻出来看看.都是基础的知识点,望各(Da)位(Lao)不喜勿喷,欢迎指正. 适用人群:考研复习过一遍数据结构的,可以看看,查漏补缺(顺便 ...

  10. HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...