Heim  >  Artikel  >  Web-Frontend  >  DIV+CSS自适应窗口高度_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:56:14845Durchsuche

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值。

    Stellungnahme:
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel:10个常见的IE bug和解决方法_html/css_WEB-ITnoseNächster Artikel:css :target_html/css_WEB-ITnose

    In Verbindung stehende Artikel

    Mehr sehen