http://blog.csdn.net/wodetiankong516/article/details/7827256
Background
Sometimes, we need to adapt Div or other element to the screen, window and browser, which will improve the appearance of the page, improve the user experience, but it is a small problem, but it uses the knowledge
You can still absorb it.
Knowledge prepared
Here are some of the size properties we need to know to help us set our own sizes.
Description
Attribute name
width of visible area of Web page
Document.body.clientWidth
High visibility area of Web page
Document.body.clientHeight
width of visible area of Web page
Document.body.offsetWidth (including the width of the edge)
High visibility area of Web page
Document.body.offsetHeight (including the width of the edge)
Page body Full text width
Document.body.scrollWidth
Page body Full text high
Document.body.scrollHeight
The page is being rolled out of the high
Document.body.scrollTop
The page is rolled away to the left
Document.body.scrollLeft
On the body part of the page
Window.screentop
Page body part left
Window.screenleft
High screen resolution
Window.screen.height
Width of screen resolution
Window.screen.width
Screen available work area height
Window.screen.availHeight
Screen available Work area width
Window.screen.availWidth
Solution
With CSS, we can easily do it and adapt it to any object. You can check the size of the div by setting a different resolution for the desktop property.
[HTML] View plaincopy
<div id = "banner" > This is the title </div>
[CSS] View plaincopy
Div#banner
{
Width:expression (Window.screen.width-(border border)-(width of scroll width scroll bar));
}
Div self-adapting screen size