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

    佛为心,道为骨,儒为表,大度看世界; 技在手,能在身,思在脑,从容过生活; 三千年读史,不外功名利禄; 九万里悟道,终归诗酒田园;
  • 相关阅读:
    PHP 语法
    PHP 变量
    为什么说PHP是个集中营
    简单介绍ThinkPHP3.1.3使用笔记
    PHP实现提交表单及输出例子
    linux 用户组以及权限
    linux vim学习
    linux基础指令学习
    pycharm
    Codeforces Round #346 (Div. 2) C题
  • 原文地址:https://www.cnblogs.com/taofx/p/4139371.html
Copyright © 2011-2022 走看看