当我使用位置相对没有内容时,页脚上升,绝对有很多内容,页脚下降,固定它总是在那里.
有没有一个简单的方法可以独立于内容来获得页面的尽头,缩小并扩展内容?
当有很多内容时,我们可以在第一页看到页脚,而当内容很少时,我们将在底部看到.
<!DOCTYPE html> <html> <head> <style type="text/css"> html,body { padding: 0; margin: 0; } header { position:fixed; top:0; width:100%; height:40px; background-color:#333; padding:20px; } footer { background-color: #333; width: 100%; bottom: 0; position: relative; } #main{ padding-top:100px; text-align:center; } </style> </head> <body> <header> header </header> <div id="main"> main </div> <footer> footer </footer> </body> </html>
解决方法
对于从位置改变的页脚:相对;定位:固定
footer { background-color: #333; width: 100%; bottom: 0; position: fixed; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。