• Div 自适应屏幕大小


    http://blog.csdn.net/wodetiankong516/article/details/7827256

    Background
          有时, 我们需要将div或者其他的Element 自适应屏幕,窗口以及浏览器 , 这样会提高页面美观,提升用户体验, 只是个小问题,但是它用到的知识
    还是可以吸收一下。

    Knowledge prepared
          这里准备下我们所要了解的一些size属性,有助于我们设置自己需要的大小。
    description
    attribute name
    网页可见区域宽
    document.body.clientWidth
    网页可见区域高
    document.body.clientHeight
    网页可见区域宽
    document.body.offsetWidth (包括边线的宽)
    网页可见区域高
    document.body.offsetHeight (包括边线的宽)
    网页正文全文宽
    document.body.scrollWidth
    网页正文全文高
    document.body.scrollHeight
    网页被卷去的高
    document.body.scrollTop
    网页被卷去的左
    document.body.scrollLeft
    网页正文部分上
    window.screenTop
    网页正文部分左
    window.screenLeft
    屏幕分辨率的高
    window.screen.height
    屏幕分辨率的宽
    window.screen.width
    屏幕可用工作区高度
    window.screen.availHeight
    屏幕可用工作区宽度
    window.screen.availWidth

    Solution
    结合CSS, 我们就可以很容易做到,让它自适应任何对象了。你可以桌面属性设置不同的分辨率来检查一下这个div的大小了。

    [html] view plaincopy

    <div id ="banner"> This is the title </div> 

    [css] view plaincopy

    div#banner 

    expression(window.screen.width - (border 边框) - (scroll width 滚动条宽度) ); 
    }

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    Ubuntu vi命令
    Aria2 使用
    axel 参数 文件下载地址
    序列化模块、加密模块
    项目开发规范、time模块、日志
    递归函数(了解)
    模块
    函数进阶四(装饰器、内置函数)
    函数进阶三(生成器、生成器表达式、匿名函数)
    函数进阶二(函数名运用,闭包,迭代器)
  • 原文地址:https://www.cnblogs.com/taofx/p/4139371.html
Copyright © 2020-2023  润新知