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 
{ 
width:expression(window.screen.width - (border 邊框) - (scroll width 滾動條寬度) ); 
}