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 滚动条宽度) );
- }