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

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

WBOY
Freigeben: 2016-06-24 11:56:14
Original
894 Leute haben es durchsucht

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

    Verwandte Etiketten:
    Quelle:php.cn
    Erklärung dieser Website
    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
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage