Horizontal scroll bar of a webpage

Source: Internet
Author: User
Body {
Overflow: Scroll ;
Overflow-X: Hidden ;
Overflow-X: Auto ! Important ;
}

However, my test results fail, and I put the body {…} in the CSS style above {...} Change to HTM {...} But it succeeded. My repeated tests concluded thatBody {…} only when no DTD is declared {...} And HTML {...} Only HTML {…} is allowed when the DTD is declared {...} Yes.

As we all know, horizontal scroll bars are generally not allowed in standard webpage design, which is determined by the appearance and ease of use of webpages.
Currently, mainstream designs are designed for 800*600 resolution. In this poor 800-pixel width, designers must not only consider the maximum display of text and images, but also beautify the table for the sake of appearance,
Increase texture and effect. It can be said that each pixel is a battle (at least I do), so some friends often ask, in the end, 800*600 resolution, do you want to have a horizontal scroll bar, how wide can the web page be?

The answer is simple: 779 pixels. (In the 800*600 Resolution, the Windows appearance is the system default, the IE window is maximized, and the margins on both sides of the page properties are 0 pixels)

· In Windows, the scroll bar width is 17 pixels by default.

· In Windows, the Border width of the active window is 1 pixel by default. However, to increase the effect, Windows has a shadow with a width of 1 pixel. Therefore, the Border width is 2 pixels in total.

· The border of the right window is 2 pixels + the scroll bar is 17 pixels = 19 pixels, and the border of the Left window is 21 pixels in total.

· In actual tests in the browser, a horizontal scroll bar is not generated for the width of 779.

During the specific design, most dual numbers are used to consider the content residence and convenience calculation, so 778 is the best size. Knowing the principle of this, 1024 or 1280 can also be easily calculated.

========================================================== ==========================================

1. In ie6.0, the width is the display resolution minus 21, for example, the width of 1024-21 is changed to 1003. However, it is worth noting that ie6.0 (or lower) has a scroll bar on the right no matter how high your webpage is.

2. In Firefox, the split rate of the width is reduced by 19. For example, the width of 1024-19 is changed to 1005.

3. In opear, the split rate of width is reduced by 23. For example, if the width of 1024-23 is 1001

Note: Firefox or opear does not display the right scroll bar when the content is smaller than the browser height.

Therefore, if the resolution is 1024, it is better to set your webpage to 1000 security. Generally, the resolution is set to 800 for 770.

These need to be understood and kept in mind, otherwise it is very likely that the things made do not meet the requirements of the browser. However, we usually set a slightly smaller value, so the width of Some browsers with plug-ins or other things will change.The resolution of 800 is generally set to 760.Left and right;About 1024.

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.