DIV+CSS自适应窗口高度

Java代码  收藏代码
  1. <html>  
  2. <head>  
  3. <title>DIV+CSS自适应窗口高度</title>  
  4. <style type="text/css">  
  5. body {  
  6.    margin: 0;  
  7.    padding: 0;  
  8.    color: #ffffff;  
  9. }  
  10. #header {  
  11.    width: 100%;  
  12.    height: 100px;  
  13.    margin: 0 auto;  
  14.    padding: 0px;  
  15.    background-color: #000099;  
  16. }  
  17. #wrapper {  
  18.    width: 100%;  
  19.    margin: 0 auto;  
  20.    padding: 0px;  
  21.    background-color: #ffffff;  
  22. }  
  23. #nav {  
  24.    float: left;  
  25.    width: 120px;  
  26.    margin: 10px 10px 10px 5px;  
  27.    background-color: #009900;  
  28. }  
  29. #content {  
  30.    margin: 10px 10px 10px 145px;  
  31.    background-color: #990099;  
  32. }  
  33. #footer {  
  34.    position: absolute;  
  35.    width: 100%;  
  36.    height: 60px;  
  37.    bottom: 0;  
  38.    background-color: #990000;  
  39. }  
  40. </style>  
  41. </head>  
  42. <body>  
  43. <div id="header">Header</div>  
  44. <div id="wrapper">  
  45. <div id="nav">Nav</div>  
  46. <div id="content">Content</div>  
  47. </div>  
  48. <div id="footer">Footer</div>  
  49. </body>  
  50. </html>  


当nav和content的高度大于一页的时候，不能满足这个需求，所以需要给nav和content设置min值。

posted @ 2014-10-14 14:04  技术狂  阅读(2547)  评论(0)  编辑  收藏  举报