HTML+CSS底部footer两种固定方式

网页常见的底部栏(footer)目前有两种:

一、永久固定,不管页面的内容有多高,footer一直位于浏览器最底部,适合做移动端底部菜单,这个比较好实现;(向立凯)

二、相对固定,当页面内容高度不沾满浏览器高度,footer显示在浏览器底部,且不会出现滚动条,如果页面内容高度超出浏览器高度,footer则相对与内容的最底部,并且自动出现滚动条;(向立凯)


废话不多说,可以直接复制代码查看效果

一、永久固定(向立凯)

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title> title>
  5. <meta charset="utf-8" />
  6. <style>
  7. body {
  8. padding-bottom: 50px;
  9. }
  10. .footer {
  11. position: fixed;
  12. left: 0px;
  13. bottom: 0px;
  14. width: 100%;
  15. height: 50px;
  16. background-color: #eee;
  17. z-index: 9999;
  18. }
  19. style>
  20. head>
  21. <body>
  22. 内容,可以大量复制看效果 <br />
  23. <div class="footer">固定在底部 div>
  24. body>
  25. html>


二、相对固定(向立凯)

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title> title>
  5. <meta charset="utf-8" />
  6. <style type="text/css">
  7. * {
  8. margin: 0px;
  9. padding: 0px;
  10. }
  11. html, body {
  12. height: 100%;
  13. }
  14. .footer {
  15. margin-top: - 50px;
  16. height: 50px;
  17. background-color: #eee;
  18. z-index: 9999;
  19. }
  20. .wrap {
  21. min-height: 100%;
  22. }
  23. .main {
  24. padding-bottom: 50px;
  25. }
  26. style>
  27. head>
  28. <body>
  29. <div class="wrap">
  30. <div class="main">
  31. 内容,可以大量复制看效果 <br />
  32. div>
  33. div>
  34. <div class="footer">相对在底部 div>
  35. body>
  36. html>

你可能感兴趣的:(HTML+CSS底部footer两种固定方式)