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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM