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配置多个跨域目标链接

    参考: https://segmentfault.com/a/1190000016199721 1.通过使用的http-proxy-middleware来实现跨域代理 devServer: { dis ...

  2. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

  3. 11.Hibernate一对多关系

    创建JavaBean 一方: Customer private long cust_id; private String cust_name; private long cust_user_id; p ...

  4. odoo xml 时间搜索条件

    今年 <filter string="This Year" name="year" domain="[('date','<=', time ...

  5. HZOI2019 星际旅行 欧拉路

    题目大意:https://www.cnblogs.com/Juve/articles/11207540.html—————————> 题解:网上都是一句话题解:将所有的边拆成两条,问题变成去掉两 ...

  6. 软件-SecureCRT：SecureCRT

    ylbtech-软件-SecureCRT:SecureCRT SecureCRT是一款支持SSH(SSH1和SSH2)的终端仿真程序,简单地说是Windows下登录UNIX或Linux服务器主机的软件 ...

  7. C#icon图标文件转Image

    Icon icon = ICONHelper.GetFileIcon(filePath); MemoryStream mStream = new MemoryStream();//创建内存流 icon ...

  8. 2019-8-31-dotnet-如何调试某个文件是哪个代码创建

    title author date CreateTime categories dotnet 如何调试某个文件是哪个代码创建 lindexi 2019-08-31 16:55:58 +0800 201 ...

  9. id 工具: 查询用户所对应的UID 和GID 及GID所对应的用户组

    id 工具是用来查询用户信息,比如用户所归属的用户组,UID 和GID等:id 用法极为简单:我们举个例子说明一下: 语法格式: id  [参数]  [用户名] 至于有哪些参数,自己查一下 id -- ...

  10. YUM配置文件

    创建容器,位置在/etc/yum.repos.d,扩展名必须是.repo #cd  /etc/yum.repos.d #vim yum.repo         新建一个仓库文件,名字可以随便定义,在 ...