页脚固定于底部的方法

原创 2016年05月30日 17:01:54

方法一:


<!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<10; 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> 



<!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> 


版权声明:本文为博主原创文章,未经博主允许不得转载。

如何将页脚固定在页面底部(多种方法实现)

[导读]当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 ...
  • u010319687
  • u010319687
  • 2014年03月24日 11:42
  • 1760

css 页脚固定到底部

页脚基本有两种显示方式: 一、固定到窗口底部一直显示,不跟随滚动条滚动 要达到这种效果方法很简单,只需要设定页脚div的 position:fixed;bottom:0; 即可。 但是如果缩小浏览器窗...
  • Inuyasha1121
  • Inuyasha1121
  • 2016年03月03日 13:31
  • 3309

JS实现让页脚一直固定在页面底部

当内容不够无法撑开页面时,需要将尾部一直固定在页面底部,JS实现页脚在浏览器可视范围内始终置底。 如下图所示: 无标题文档 * { margin: 0px; padding: 0px; ...
  • sweet_o
  • sweet_o
  • 2016年12月26日 16:18
  • 2407

网页布局中页面内容不足一屏时页脚footer固定底部

网页布局中页面内容不足一屏时页脚footer固定底部实现样式: -页面内容不足一屏时页脚固定在底部; -页面内容超过一屏时,滚动内容到底部时出现页脚;下面介绍两种方案,第一种方案依赖于浏览器对bo...
  • panchaofeng
  • panchaofeng
  • 2016年11月11日 17:08
  • 274

CSS + DIV 让页脚始终底部

1、利用 bottom 属性? 在实践之前,很容易联想到用 CSS 里面的 bottom 属性让页脚在最下面,可是这个是行不通的。如果使用了如下方法: footer { bottom:...
  • nathanhuang1220
  • nathanhuang1220
  • 2014年04月09日 11:42
  • 2807

将页脚固定在页面底部

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你...
  • helloxiaoliang
  • helloxiaoliang
  • 2015年08月27日 18:23
  • 906

完美解决HTML中footer保持在页面底部问题

完美解决HTML中footer保持在页面底部问题
  • m0_38099607
  • m0_38099607
  • 2017年05月10日 22:42
  • 8634

Flexbox如何将页面底部固定在屏幕最下方

原文:Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时,有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少,无法将内容区...
  • u010378313
  • u010378313
  • 2016年04月23日 14:22
  • 2423

如何将页脚固定在页面底部

来源:w3cplus 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给...
  • LYC_2011_ACM
  • LYC_2011_ACM
  • 2013年03月18日 00:55
  • 17635

如何将页脚固定在页面底部

作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当一个HTML页面中含有较少的内容时,Web页面的“footer”部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,让你...
  • caijunfen
  • caijunfen
  • 2017年10月24日 11:03
  • 142
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页脚固定于底部的方法
举报原因:
原因补充:

(最多只允许输入30个字)