怎么让footer始终在页面底部？

来源：互联网发布：同花顺炒股软件下载编辑：程序博客网时间：2024/05/01 20:10

当页面内容少时，footer页尾显示在屏幕的底部（一般会向上浮动，在屏幕的中间）。

当页面内容多是，footer页尾也不会固定在屏幕的下方而是显示在整个页面的底部。

怎样才能实现以上两种效果呢

代码如下：

<style type="text/css">html,body{margin:0;padding:0;height:100%;   /*必须*/}#contain{width:100%;min-height:100%;height:auto;position:relative;}#header{width:100%;height:50px;background:#f90;}#content{width:1200px;margin:0 auto;height:auto;padding-bottom:50px; /*等于footer的高度*/}#footer{width:100%;height:50px;background:#f90;position:absolute;bottom:0px;    /*使footer固定在contain的底部*/}</style>

<body><div id="contain"><div id="header">    我是头部    </div><div id="content">     <div>内容</div>        <div>内容</div>         <div>内容</div>        <div>内容</div>        <div>内容</div>          </div><div id="footer">    我是尾部    </div></div></body>

1 0