Div 自适应屏幕大小

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