Div 自适应屏幕大小

标签：des   blog   http   io   ar   sp   on   div   art   

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 
{ 
width:expression(window.screen.width - (border 边框) - (scroll width 滚动条宽度) ); 
}

Div 自适应屏幕大小

标签：des   blog   http   io   ar   sp   on   div   art   

原文地址：http://www.cnblogs.com/taofx/p/4139371.html