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

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    c语言 判断文件是否存在
    lua 二进制函数使用
    linux sort 多列正排序,倒排序
    free命令学习 输出理解
    nginx 配置实现逻辑预算
    nginx 使用ctx实现数据共享,修改上下文
    lua中的数学库
    tornado文件上传实例
    ajax技术初识与应用
    web框架--XSS攻击和CSRF请求伪造
  • 原文地址:https://www.cnblogs.com/taofx/p/4139371.html
Copyright © 2011-2022 走看看