【第22期】观点:IT 行业加班,到底有没有价值?

页脚固定于底部的方法

原创 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> 


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

相关文章推荐

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

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

listView属性及方法小析

关于listview的小例子,以前也写过一个,http://blog.csdn.net/aomandeshangxiao/article/details/6643831,今天的这篇文章主要是说一下listview里面的方法和属性,内容均来自:<a href="http://developer.android.com/reference/android/widget/L

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

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

CSS应用---让页脚紧贴页面底部

Google一下可以找到很多让页脚紧贴页面底部的方法,我试过其中的很多,但他们总会在某些方面存在一些问题。之所以有这些问题,可能是因为出现了更新版本的浏览器。一些方法因为太过久远,原本在老版本浏览器可以正常工作,却不再适用更新之后的版本。也因为这些页面太过久远,过去曾被大量链接过,所以在Google的结果中排名很高。这样,一些网站管理员在搜索sticky footer方案的时候,对搜索出的结果都很挠头,因为排在搜索结果前列的方法都有这样那样的问题。 众所周知的是Ryan Fait的方案,它的确工作的很好。但是,它必须要单独写一个没有内容的div,来提供额外的"push"。对HTML语义要

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

当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下作为一个W...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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