当我使用位置相对没有内容时,页脚上升,绝对有很多内容,页脚下降,固定它总是在那里.
有没有一个简单的方法可以独立于内容来获得页面的尽头,缩小并扩展内容?
当有很多内容时,我们可以在第一页看到页脚,而当内容很少时,我们将在底部看到.
<!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; }