css footer固定在底部,即有内容footer随着内容的高度撑开,如果内容比较少,就直接显示在屏幕的最下面
实现方式:给父元素设置相对定位并设置最小高度,给子元素设置绝对对位,并bottom等于0即可,代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .center{ width: 100%; min-height: 100vh; position: relative; } .tbody{ width: 1200px; height: 1600px; margin: 0 auto; } .footer{ width: 100%; height: 120px; line-height: 120px; text-align: center; font-size: 14px; background: #999999; position: absolute; bottom: 0; } </style> </head> <body> <div class="center"> <div class="tbody"></div> <div class="footer">footer</div> </div> </body> </html>
可以通过修改tbody的高度来查看效果:
当然了实现的方式肯定不止一种,还有其它的方式(例如弹性布局),欢迎留言探讨