让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。

方案一：

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8" />

     <style type="text/css">

         body, html {

             margin: 0;

             padding: 0;

             height: 100%;

         }

         #main {

             position: relative;

             min-height: 100%;

             background: #eee;

         }

         #content {

             padding: 10px;

             padding-bottom: 100px;

         }

         #footer {

             position: absolute;

             bottom: 0;

             height: 100px;

             width: 100%;

             background: lightblue;

         }

     </style>

 </head>

 <body>

     <div id="main">

         <div id="content">

             <script type="text/javascript">

                 for (var i = 0; i < 400; i++) {

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

                 }

             </script>

         </div>

         <div id="footer">

             Footer

         </div>

     </div>

 </body>

 </html>

方案二：

 <!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8">

     <title>css实现页脚始终在最底部</title>

     <style type="text/css">

         * {

             padding: 0;

             margin: 0;

         }

         html {

             *overflow: auto;

         }

         body {

             _width: expression(this.parentNode.clientWidth);

         }

         html, body {

             height: 100%;

         }

         .section {

             min-height: 100%;

             _height: 100%;

         }

         .footer {

             height: 60px;

             background: #000;

             margin-top: -60px;

             color: #FFF;

         }

     </style>

 </head>

 <body>

     <div class="section">

         <script type="text/javascript">

             for (var i = 0; i < 400; i++) {

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

             }

         </script>

     </div>

     <div class="footer">我是页脚</div>

 </body>

 </html>

让页脚始终固定在屏幕底部：

 <!doctype html public "-//w3c//dtd html 4.0 transitional//en">

 <html>

 <head>

     <title></title>

     <meta name="generator" content="editplus">

     <meta name="author" content="Ariex">

     <meta name="keywords" content="">

     <meta name="description" content="">

     <style type="text/css">

         body {

             margin: 0px;

             padding: 0px;

             overflow: hidden;

             padding-top: 22px;

             padding-bottom: 22px;

         }

         #header {

             background-color: blue;

             color: white;

             position: absolute;

             top: 0px;

             left: 0px;

             height: 16px;

             width: 100%;

         }

         #content {

             background-color: yellow;

             width: 100%;

             height: 100%;

             overflow: auto;

         }

         #footer {

             background-color: green;

             color: white;

             width: 100%;

             height: 16px;

             position: absolute;

             bottom: 0px;

             left: 0px;

         }

     </style>

     <script language="javascript">

     </script>

 </head>

 <body>

     <div id="header">header</div>

     <div id="content">

         <script language="javascript">

             for (i = 0; i < 1000; i++) {

                 document.write(i + "");

             }

         </script>

     </div>

     <div id="footer">footer</div>

 </body>

 </html>

005-CSS让页脚始终在底部不论页面内容多少的更多相关文章

  1. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  2. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  3. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  4. html页脚固定在底部的方法

    <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; paddi ...

  5. 让页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 【CSS】使用浮动来创建拥有页眉、页脚、左侧目录和主体内容的首页

    有两种创建水平导航栏的方法.使用行内或浮动列表项. 如果您希望链接拥有相同的尺寸,就必须使用浮动方法. 1.构建水平导航栏的方法之一是将 <li> 元素规定为行内元素: display:i ...

  7. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  8. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  9. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

随机推荐

  1. 用c# 开发html5的尝试，试用bridge.net

    Javascript交叉编译方案很多了,工业级品质的也不是没有,但前两年我从事html5 3d引擎开发时,做过一圈评估,没有可用的. 作为一个c#爱好者,我自然是很希望能最大限度的利用c#的生产力,之 ...

  2. Spring Cloud微服务笔记（一）微服务概念

    微服务概念 一.什么是微服务架构 微服务,是一个小的.松耦合的分布式服务. 为什么需要微服务: 1)单体系统部署在一个进程中,修改了一个小功能,为了部署上线就会影响其他功能. 2)单体应用各个功能模块 ...

  3. 杭电1257 dp（java）

    最少拦截系统 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能超过前一发的高度.某天,雷达捕捉到敌国的 ...

  4. (94)Wangdao.com_第二十七天_键盘事件

    键盘事件 键盘事件由用户击打键盘触发 主要有 keydown.keyup .keypress三个事件,它们都继承了 KeyboardEvent 接口. keydown         按下键时 触发 ...

  5. spring-boot+mybatisPlus+shiro的集成demo 我用了5天

    spring-boot + mybatis-plus + shiro 的集成demo我用了五天 关于shiro框架,我还是从飞机哪里听来的,就连小贱都知道,可我母鸡啊.简单百度了下,结论很好上手,比s ...

  6. 微信小程序开发的游戏《拼图游戏》

    微信小程序开发的游戏<拼图游戏> 代码直接考进去就能用 pintu.js // pintu.js Page({ /** * 页面的初始数据 */ data: { }, initGame: ...

  7. 如何使用mybatis插入数据之前就具生成id值

    SelectKey在Mybatis中是为了解决Insert数据时不支持主键自动生成的问题,该功能可以很随意的设置生成主键的方式. 不管SelectKey有多好,尽量不要遇到这种情况吧,毕竟很麻烦. k ...

  8. Cassandra数据模型

    Ⅰ.数据模型 1.1 Column 一组包含Name/Value Pair的数据叫Row,其中每一组Name/Value Pair叫Column Column是Cassandra最基本的数据结构,它是 ...

  9. express 随笔

    #express 1.使用Express 应用生成器 npm install express-generator -g 2.创建一个命名为 myapp 的应用 express myapp 3.安装所有 ...

  10. 【OJ】抓牛问题

    /* 农夫John的奶牛跑路了.将地图视作一条数轴,John的初始位置在s而奶牛的位置在t(0<=s,t<=100000).John可以花费一分钟的时间使自己作如下移动: 1 从点x移动到 ...