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

方案一：

 <!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# 堆栈（Stack）和队列（Queue）

    一.什么是堆?(Heap)      堆是无序的,是一片不连续的内存域,由用户自己来控制和释放,如果用户自己不释放的话,当内存达到一定的特定值时,通过垃圾回收器(GC)来回收.      是程序运行期 ...

  2. 堡垒机jumpserver测试记录--安装

    一步一步安装(CentOS) 基本都是官网的东西,只是有些坑做了记录. http://docs.jumpserver.org/zh/docs/step_by_step.html 环境 系统: Cent ...

  3. Vs2017 typescript 开发小问题

    最近想写点ts的东西,以前用vs2015很方便,直接创建一个ts app项目就折腾了. Vs2017打开,居然发现这个项目模板不见了.   于是研究了一下,由于原来的ts app项目就是一个asp.n ...

  4. Spark环境搭建（四）-----------数据仓库Hive环境搭建

    Hive产生背景 1)MapReduce的编程不便,需通过Java语言等编写程序 2) HDFS上的文缺失Schema(在数据库中的表名列名等),方便开发者通过SQL的方式处理结构化的数据,而不需要J ...

  5. 小甲鱼Python第二十二讲课后习题

    笔记: 斐波那契数列的两种实现方式:   迭代的方式: 自己写的: def fab(n): n1 =1 n2 =1 n3 =1 if n < 1: return -1 if n ==1: ret ...

  6. dup（dup2/dup3）

    readme man~ NAME dup, dup2, dup3 - duplicate a file descriptor SYNOPSIS #include <unistd.h> in ...

  7. Java-IO流之输入输出流基础示例

    一.理论: 1.什么是输入输出? 输入输出的对象是数据,数据的存储区域是磁盘或者光盘等设备,我们知道还有一个存储数据的空间----内存,其中磁盘的速度比较慢,内存的速度比较快,把数据读入内存的动作称作 ...

  8. ECMA Script 6_唯一容器 Set_映射容器 Map

    唯一容器 Set ES6 提供了新的数据结构 Set Set 结构没有键名,只有键值(或者说 键名 和 键值 是同一个值) 它类似于数组,但是成员的值都是唯一的,没有重复的值 Set 内部判断两个值是 ...

  9. Nginx负载均衡后端健康检查（支持HTTP和TCP）

    之前有一篇文章记录nginx负载均衡后端检查,链接为 https://www.cnblogs.com/minseo/p/9511456.html 但是只包含http健康检查不包含tcp下面安装ngin ...

  10. 我了解到的新知识之----如何使用Python获取最新外汇汇率信息

    这个需求本来是来源于公司同事工作中需求,用户需要使用数据分析工具Power BI抓取多页的中国银行官网上当天的外汇数据.但是没能研究出来. 我就开始在网络上找关于使用python来抓取当天汇率的案例分 ...