html – CSS – 标题 – 始终是底部页脚和100%内容

前端之家收集整理的这篇文章主要介绍了html – CSS – 标题 – 始终是底部页脚和100%内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
  1. <body>
  2. <div id="wrap">
  3. <div id="header">
  4. HEADER
  5. </div>
  6. <div id="inner-wrap">
  7. <div id="content">
  8. CONTENT
  9. </div>
  10. </div>
  11. <div id="footer">
  12. FOTTER
  13. </div>
  14. </div> </body>

和CSS:

  1. html { height:100%; max-height:100%; }
  2.  
  3. body {
  4. margin:0;
  5. padding:0;
  6. height:100%;
  7. max-height: 100%;
  8. }
  9.  
  10. #wrap {
  11. min-height:100%;
  12. height: 100%;
  13. position:relative;
  14. }
  15. * html #wrap { height:100% }
  16.  
  17. #inner-wrap {
  18. padding-bottom:50px;
  19. min-height: 100%;
  20. }
  21. #inner-wrap:after {
  22. content:" ";
  23. display:block;
  24. clear:both;
  25.  
  26. }
  27. * html #inner-wrap {
  28. height:100%;
  29. }
  30.  
  31. #header
  32. {
  33. width: 100%;
  34. background-color: #C0C0C0;
  35. height: 16px;
  36. color: White;
  37. text-align: center;
  38. position: relative;
  39. top:0px;
  40. }
  41. #footer
  42. {
  43. width: 100%;
  44. background-color: #C0C0C0;
  45. height: 50px;
  46. position:absolute;
  47. bottom: 0;
  48. color: White;
  49. text-align: center;
  50. }
  51. #content
  52. {
  53. width: 1000px;
  54. height: 100%;
  55. background-color: #F5FDEC;
  56. margin: 0 auto 0 auto;
  57. }

问题:

我怎么能做到这一点:HEADER top 16px,
内容动态100%高度,
FOOTER在页面末尾

如果我100%给内包装DIV,它们在页脚之后是白色空间.

谢谢

解决方法

你有太多的高度:

从选择器中删除最小高度和最大高度值.

删除位置:绝对;来自你的#wrap div.

我做了一个例子for you here.

猜你在找的HTML相关文章