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. GitHub for Visual Studio使用讲解

    从VS2015起(应该是吧?),微软已经在VS中集成了GitHub,方便开发者对项目进行版本控制. 扩展包下载地址:https://aka.ms/ghfvs 其实VS2015的安装包中已经自带了这个扩 ...

  2. MVC中视图访问的约定

    通常访问视图的时候,都会去选择访问Views文件夹内对应于Controller同名的文件夹下的某一个视图,这个视图对应于这个Controller类的某一个方法. 其实,也可以让这个方法对应于不同名的c ...

  3. redis String 命令

    今天在虚拟机的Ubuntu上装了一个redis,学习redis的一些基本东西,在数据类型的时候,看到redis的,String,hash,set list zset,对String的setbit命令一 ...

  4. Spring Cloud Eureka 使用外网IP和端口号进行服务注册

    应用场景如下: 服务提供方(即要注册到服务中心的服务)的内网地址,外界无法访问(或者使用docker等做了应用端口等的配置),做了IP映射后,公网IP49.10.22.106映射到服务提供方的内网ip ...

  5. Unity 用代码设置UGUI的渲染层级

    用代码设置UGUI渲染无非和三个API有关: 1.SetAsFirstSibling(); 2.SetAsLastSibling(); 3.SetSiblingIndex(n) SetAsFirstS ...

  6. spring boot项目搭建中遇到的问题

    自己动手搭建一下spring boot的项目,中途遇到了几个问题,在这里记录一下! 一.关于数据库中的表设计的问题 1.设计表的时候一定要添加的两个字段created updated 创建时间与更新时 ...

  7. [编织消息框架][netty源码分析]3 EventLoop 实现类SingleThreadEventLoop职责与实现

    eventLoop是基于事件系统机制,主要技术由线程池同队列组成,是由生产/消费者模型设计,那么先搞清楚谁是生产者,消费者内容 SingleThreadEventLoop 实现 public abst ...

  8. springboot+atomikos+多数据源管理事务(mysql 8.0)

    jta:Java Transaction API,即是java中对事务处理的api 即 api即是接口的意思 atomikos:Atomikos TransactionsEssentials 是一个为 ...

  9. 深入浅出 Java Concurrency (11): 锁机制 part 6 CyclicBarrier[转]

    如果说CountDownLatch是一次性的,那么CyclicBarrier正好可以循环使用.它允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).所谓屏障点就 ...

  10. Struts2启动问题：ClassNotFoundException: org...dispatcher.ng.filter.StrutsPrepareAndExecuteFilter

    错误信息: java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExec ...