Div self-adapting screen size

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.