Div 自適應螢幕大小
阿新 • • 發佈：2019-02-05
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的大小了。
<div id ="banner"> This is the title </div>div#banner { width:expression(window.screen.width - (border 邊框) - (scroll width 滾動條寬度) ); }