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
Release: 2016-06-24 11:56:14
Original
889 people have browsed it

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

    Related labels:
    source:php.cn
    Previous article:10 common IE bugs and solutions_html/css_WEB-ITnose Next article:css :target_html/css_WEB-ITnose
    Statement of this Website
    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
    Latest Articles by Author
    Latest Issues
    Related Topics
    More>
    Popular Recommendations
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template