页脚固定于底部的方法

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


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

相关文章推荐

[startrelatedarticles]

{relatedtitle}

{relateddes}
[endrelatedarticles] [startrelatedarticlesdownload]

{relatedtitle}

  • {relateposttime}
  • {relatesize}
  • 下载
[endrelatedarticlesdownload] [startrelatedarticlesad1]

{relatedtitle}

{relateddes}
[endrelatedarticlesad1] [startrelatedarticlesad2] [endrelatedarticlesad2]
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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