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. vue 组件内引入外部在线js、css

    参考:https://blog.csdn.net/u010881899/article/details/80895661 例:引入element-ui js: mounted() { const oS ...

  2. Mybatis编写配置文件时，需要注意配置节点的顺序

    mybatis-config.xml配置文件配置时,要注意节点顺序 <properties>...</properties> <settings>...</s ...

  3. 新增的Java MapReduce API

    http://book.51cto.com/art/201106/269647.htm Hadoop的版本0.20.0包含有一个新的 Java MapReduce API,有时也称为"上下文 ...

  4. 初识splay

    这东西都没什么板子着实让我很难受啊,只能到网上抄抄补补, 记下两个用到的博客 https://blog.csdn.net/clove_unique/article/details/50630280 h ...

  5. JZOJ5967 常数国

    题目 像素有点低啊~ 算了凑合一下就好啦~ 题目大意 给你一个首尾相接的数列,每次对一个区间进行操作: 顺时针操作,如果当前值比vvv大,就交换.输出最后的vvv. 比赛思路 首先这题的时限这么仁慈, ...

  6. 伸缩布局flex

    一.伸缩布局的起源 1.之前我们想要适应不同的浏览器,一般采用的是设置宽度.高度为父级元素的百分比,但是有时候百分比的计算是相当复杂的,加上有时候还有规定的宽度要设置,所以,伸缩布局的出现是我们所急需 ...

  7. Python技巧—list与字符串互相转换

    Python技巧-list与字符串互相转换 在Python的编程中,经常会涉及到字符串与list之间的转换问题,下面就将两者之间的转换做一个梳理. 1.list转换成字符串 命令:list() 例子: ...

  8. jquery与js区别

    js与jquery的区别 js里面找元素是通过dom操作,jquery是通过$ DOM:土鳖jQuery:土豪1. DOM-->jQuery(土鳖变土豪)拿钱砸:$Var txtName = d ...

  9. java udp协议DatagramSocket类使用

    package com.temp; import org.junit.Test; import java.io.*; import java.net.DatagramPacket; import ja ...

  10. 两周的业余时间，写了个简单的shell

    Linux下的,环境是 Fedora 实现了基本的内部命令功能,及比较完善的内部命令框架. 类似于MFC消息映射表的方式,写完一个内部命令,只需要向这个头文件中,导入一个头文件,再写入命令处理函数,就 ...