zoukankan      html  css  js  c++  java
  • 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 滚动条宽度) ); 
    }

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    easyui tree loader用法
    mysql字符集
    mysql 内连接 左连接 右连接 外连接
    mysql 聚集函数和分组
    mysql 大数据量求平均值
    C++ 纯虚方法
    Windows xcopy
    服务端数据库的操作如何不阻塞
    分布式系统业务服务器的设计
    mysql 查询执行的流程
  • 原文地址:https://www.cnblogs.com/taofx/p/4139371.html
Copyright © 2011-2022 走看看