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

方案一：

 <!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. windows server 简化设置

    win2012任务管理器显示磁盘管理员运行命令提示符,diskperf -y 不要开机密码 运行 netplwiz 勾去掉 运行 gpedit.msc 计算机设置-Windows设置 -安全设置-帐户 ...

  2. rabbitmq重启时报错，并导致erlang崩溃和Rabbit的常用命令

    -------------------------------------------------------------------------------------------------- R ...

  3. angular.isFunction()

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. HTML5_canvas_填充文本，描边文本

    canvas 文本相关 填充文本 pen.fillText("HelloWorld", 100, 100);        文本的(100, 100) 在文本基线处 文本样式 pe ...

  5. ng7 设置http proxy

    看文档 proxy.conf.json { "/api": { "target": "http://localhost:5000", &qu ...

  6. 剑指offer——python【第39题】平衡二叉树

    题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树.   解题思路 平衡二叉树首先是二叉搜索树,且它每个节点的左子树和右子树高度差至多等于1:只要从根节点,依次递归判断每个节点是否满足如上条件即可 ...

  7. hh

    1

  8. Spring Cloud 学习记录

    Spring Cloud中文网 拜托!面试不要再问我Spring Cloud底层原理 SpringCloud简介与5大常用组件 Spring Cloud在国内中小型公司能用起来吗?

  9. CentOS7安装MySQL并允许远程登录

    下载 mysql 源安装包 $ curl -LO http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 安装 mys ...

  10. Overview of Azure Storage

    Azure Storage types Blob storage. Containers for data blobs. The three types of blobs are: Page blob ...