首页 web前端 html教程 DIV+CSS自适应窗口高度_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:56 AM

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

    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

    热门文章

    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章

    仓库:如何复兴队友
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前 By 尊渡假赌尊渡假赌尊渡假赌
    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    1 周前 By 尊渡假赌尊渡假赌尊渡假赌

    热门文章标签

    记事本++7.3.1

    记事本++7.3.1

    好用且免费的代码编辑器

    SublimeText3汉化版

    SublimeText3汉化版

    中文版,非常好用

    禅工作室 13.0.1

    禅工作室 13.0.1

    功能强大的PHP集成开发环境

    Dreamweaver CS6

    Dreamweaver CS6

    视觉化网页开发工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神级代码编辑软件(SublimeText3)

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

    公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?

    如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

    如何使用HTML5表单验证属性来验证用户输入?

    < iframe>的目的是什么。 标签?使用时的安全考虑是什么? < iframe>的目的是什么。 标签?使用时的安全考虑是什么? Mar 20, 2025 pm 06:05 PM

    < iframe>的目的是什么。 标签?使用时的安全考虑是什么?

    如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

    如何高效地在网页中为PNG图片添加描边效果?

    < meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

    < meter>的目的是什么。 元素?

    < datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

    < datalist>的目的是什么。 元素?

    视口元标签是什么?为什么对响应式设计很重要? 视口元标签是什么?为什么对响应式设计很重要? Mar 20, 2025 pm 05:56 PM

    视口元标签是什么?为什么对响应式设计很重要?

    > gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

    > gt;的目的是什么 元素?

    See all articles