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

方案一:

 <!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. 淘宝(阿里百川)手机客户端开发日记第六篇 Service详解(六)

    Service和Thread的关系 不少初学者都可能会有这样的疑惑,Service和Thread到底有什么关系呢?什么时候应该用Service,什么时候又应该用Thread? 答案是Service和T ...

  2. java笔记01-反射

    --2013年7月26日17:56:35 写文章之前,参考了这篇:http://www.cnblogs.com/Quincy/archive/2011/06/19/2084557.html 评价:这个 ...

  3. FPGA中浮点运算实现方法——定标

    有些FPGA中是不能直接对浮点数进行操作的,仅仅能採用定点数进行数值运算.对于FPGA而言,參与数学运算的书就是16位的整型数,但假设数学运算中出现小数怎么办呢?要知道,FPGA对小数是无能为力的,一 ...

  4. C++ 内存分析-valgrind

    valgrind包括了以下几个比较重要的模块:memcheck, cachegrind, callgrind, helgrind, drd, massif, dhat, sgcheck, bbv. 还 ...

  5. ISLR系列:(3)重采样方法 Cross-Validation &amp; Bootstrap

    Resampling Methods 此博文是 An Introduction to Statistical Learning with Applications in R 的系列读书笔记,作为本人的 ...

  6. cc.Mask. 纯代码拉伸遮罩

    var imgBoxInner = new cc.Node('imgBoxInner');var mask = imgBoxInner.addComponent(cc.Mask);mask.alpha ...

  7. Junit 命令行测试 报错:Could not find class 理解及解决方法

    一.报错 : 『Could not find class』 下面给出三个示例比较,其中只有第一个是正确的. 1. MyComputer:bin marikobayashi$ java -cp .:./ ...

  8. CRM ORDER_MAINTAIN

    H: GUID CRMT_OBJECT_GUID RAW CRM 订单对象的 GUID BP_NUMBER BU_PARTNER 业务伙伴编号 FIRSTNAME BU_NAMEP_F 业务伙伴(人员 ...

  9. Python 实现画一个小猪佩奇

    ===================================== 看到 佩奇的广告片刷红,为了迎接猪年,咱们也来用Python  画板实现一个效果吧 from turtle import* ...

  10. Spring集成quartz集群配置总结

    1.spring-quartz.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE be ...