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 滚动条宽度) ); 
    }

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    多项式回归学习笔记
    线性回归学习笔记
    CentOS6.9下安装python notebook
    CentOS 6.9下安装PostgreSQL
    区块链共识机制及其迭代
    比特币的区块结构解析
    区块链学习路线
    应用缓存的常见问题及解决
    阿里巴巴开源技术体系
    工程师进阶推荐十本书
  • 原文地址:https://www.cnblogs.com/taofx/p/4139371.html
Copyright © 2011-2022 走看看