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 滾動條寬度) );
}
