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

方案一：

 <!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. Mapjoin和Reducejoin案例

    一.Mapjoin案例 1.需求:有两个文件,分别是订单表.商品表, 订单表有三个属性分别为订单时间.商品id.订单id(表示内容量大的表), 商品表有两个属性分别为商品id.商品名称(表示内容量小的 ...

  2. HDFS及其各组件的机制

    一.HDFS运行机制 概述:用户的文件会被切块后存储在多台datanode节点中,并且每个文件在整个集群中存放多个副本,副本的数量可以通过修改配置自己设定. HDFS:Hadoop Distribut ...

  3. Skeleton Screen -- 骨架屏--应用

    案例:使用 现已经在支付的项目使用 用户体验一直是前端开发需要考虑的重要部分,在数据请求时常见到锁屏的loading动画,而现在越来越多的产品倾向于使用Skeleton Screen Loading( ...

  4. Service的启动过程

    --摘自<Android进阶解密> 第一步:ContextImpl到ActivityManagerService的调用过程 第二步:ActivityThread启动Service 1)Pr ...

  5. B - Housewife Wind-树链剖分-树状数组

    思路:边权转化到点权上,统一把每一条边的边权集中到深度较深的点上去. #include<stdio.h> #include<iostream> #include<cstr ...

  6. django——文本编辑器

    在博客项目中,为了支持用户的在线编辑博客,我们选用了kindeditor这个强大的编辑器. 以下是对kindeditor的简介,以及在Django中引入这个编辑器的方法:) 1.KindEditor是 ...

  7. python之面向对象深入探测

    一 __doc__ 表示类的描述信息 #!/usr/bin/env python # -*- coding: utf-8 -*- class C: """ 这是个大美女 ...

  8. vee-validate的使用

    官网地址:http://vee-validate.logaretm.com/ 这是一个插件Vue.js可以验证输入字段,显示错误,在一个简单而强大的方法.学习vee-validate,首先可以去阅读官 ...

  9. java生成/解析二维码

    package a; import java.awt.BasicStroke; import java.awt.Graphics; import java.awt.Graphics2D; import ...

  10. AUC计算 - 进阶操作

    首先AUC值是一个概率值,当你随机挑选一个正样本以及负样本,当前的分类算法根据计算得到的Score值将这个正样本排在负样本前面的概率就是AUC值,AUC值越大,当前分类算法越有可能将正样本排在负样本前 ...