Home >Web Front-end >HTML Tutorial >DIV CSS adaptive window height_html/css_WEB-ITnose

DIV CSS adaptive window height_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:56:14887browse

Java代码   

  1.   
  2.   
  3. DIV CSS自适应窗口高度  
  4.   
  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.   
  41.   
  42.   
  43. Header
  
  •   
  • Nav
  •   
  • Content
  •   
  •   
  • Footer  
  •   
  •   

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

    Statement:
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Previous article:10 common IE bugs and solutions_html/css_WEB-ITnoseNext article:10 common IE bugs and solutions_html/css_WEB-ITnose

    Related articles

    See more