Maison  >  Article  >  interface Web  >  DIV+CSS自适应窗口高度_html/css_WEB-ITnose

DIV+CSS自适应窗口高度_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 11:56:14845parcourir

Java代码   

  1.   
  2.   
  3. DIV+CSS自适应窗口高度  
  4. body {  
  5.    margin: 0;  
  6.    padding: 0;  
  7.    color: #ffffff;  
  8. }  
  9. #header {  
  10.    width: 100%;  
  11.    height: 100px;  
  12.    margin: 0 auto;  
  13.    padding: 0px;  
  14.    background-color: #000099;  
  15. }  
  16. #wrapper {  
  17.    width: 100%;  
  18.    margin: 0 auto;  
  19.    padding: 0px;  
  20.    background-color: #ffffff;  
  21. }  
  22. #nav {  
  23.    float: left;  
  24.    width: 120px;  
  25.    margin: 10px 10px 10px 5px;  
  26.    background-color: #009900;  
  27. }  
  28. #content {  
  29.    margin: 10px 10px 10px 145px;  
  30.    background-color: #990099;  
  31. }  
  32. #footer {  
  33.    position: absolute;  
  34.    width: 100%;  
  35.    height: 60px;  
  36.    bottom: 0;  
  37.    background-color: #990000;  
  38. }  
  39.   
  40.   
  41.   
  42. Header
      
  43.   
  44. Nav
      
  45. Content
      
  
  • Footer
      
  •   
  •   

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

    Déclaration:
    Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
    Article précédent:10个常见的IE bug和解决方法_html/css_WEB-ITnoseArticle suivant:css :target_html/css_WEB-ITnose

    Articles Liés

    Voir plus