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

方案一：

 <!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. BZOJ4827 [Hnoi2017]礼物 多项式 FFT

    原文链接http://www.cnblogs.com/zhouzhendong/p/8823962.html 题目传送门 - BZOJ4827 题意 有两个长为$n$的序列$x$和$y$,序列$x,y ...

  2. 向量 dot cross product 点积叉积 几何意义

    向量 dot cross product 点积叉积 几何意义 有向量 a b 点积 a * b = |a| * |b| * cosθ 几何意义: 1. a * b == 0,则 a ⊥ b 2. a ...

  3. vue.cli脚手架初次使用图文教程

    vue-cli作用 vue-cli作为vue的脚手架,可以帮助我们在实际开发中自动生成vue.js的模板工程. vue-cli使用 !!前提:需要vue和webpack 安装全局vue-cli npm ...

  4. HDU 1880 魔咒词典 (字符串hash)

    <题目链接> 题目大意: 就是每个字符串有一个配套的对应字符串,询问的时候,无论输出其中的哪一个字符串,输出另一个,如果不存在这个字符串,直接输出"what?". 解题 ...

  5. Mac_安装Homebrew以及Maven

    Mac OSX上的软件包管理工具,安装软件或者卸载软件. 打开终端输入(如不行,可参考homebrew官网): ruby -e "$(curl -fsSL https://raw.githu ...

  6. tp3.2 模块单独配置数据库

    一 $User = M('test','tp_','mysql://root:123456@localhost/new_lezhu#utf8'); 1.test       -->表名 2.tp ...

  7. thinkphp框架，数据动态缓存后，或数据已读取出来，想分页怎么办

    //读取缓存后赋值到数组,通过array_slice函数处理,如: $blog = S('blogname'); //赋值 $count = count($blog); //条数统计 $page = ...

  8. linux权限字母的含义

    无 --- 只能列出文件 r-- 访问文件 r-x 创建和删除文件 rwx

  9. Spring的核心模块解析

    Spring框架是一个轻量级的集成式开发框架,可以和任何一种框架集成在一起使用,可以说是一个大的全家桶.Spring从1.x发展到现在的5.x可以说是越来越强大,下面来看看Spring都包含哪些核心的 ...

  10. doubleclick cookie、动态脚本、用户画像、用户行为分析和海量数据存取 推荐词 京东 电商 信息上传 黑洞 https://blackhole.m.jd.com/getinfo

    doubleclick cookie https://mp.weixin.qq.com/s/vZUj-Z9FGSSWXOodGqbYkA 揭密Google的网络广告技术:基于互联网大数据视角 原创:  ...