[Original] Say goodbye to the annoying horizontal scroll bar-what is the width of the scroll bar?

Believe thatWebFront-end or back-endProgramThey all hate the scroll bar in the horizontal direction of the webpage. To avoid horizontal scroll bars, calculating the width is essential. In the design process, the designer generally avoids calculating the width of the scroll bar on the right. To avoid horizontal scroll bars, set the width to 50 or 60 pixels less than the specific resolution width. For exampleYuiRecommended width750pxPair800*600Resolution,950pxOr974pxPair1024*768Resolution. It is generally considered that the width of the scroll bar is20pxIs the width of the scroll bar on the right of the window true?20pxIs it the same on different mainstream browsers?

I set the display resolution from1440*900Transfer800*600, Use the followingCSSAndHtmlI did a simple test.

Html:

< Div ID = "Content" >

< Span > Div used for testing. </ Span >

</ Div >

CSS:

* {} {Margin:0;Padding:0;}

Div # Content {} {Width:780px;Height:600px;Background-color:# Ccc;Margin:0 auto;}

Result IE7No horizontal scroll bar ( Width Is 781px Yes. IE6 And Firefox2 The horizontal scroll bar is displayed. If yes 20px Then there should be no horizontal scroll bars. So I will Div # Content Of Width Attribute Reduction. When changed 776px , Firefox2 The horizontal scroll bar in and IE6 Still exist. When changed 772px , IE6The horizontal scroll bar in is also missing, Firefox2 Of course, no more. Isn't it IE6 The scroll bar at the right of the browser window is 28px , Firefox2 Moderate 24px , IE7 Which is 20px ?

What if I maximize the right of the window?

Therefore, I press"F11"Key, adjust againDiv # ContentOfWidthAttribute. Result:Firefox2AndIE7Is784pxWhen there is no horizontal scroll barIE6, Is788pxThere is no horizontal scroll bar.

To maximizeIE6The scroll bar on the right is12px,IE7AndFirefox2Is16pxIs that true?

Are you sure you want to draw a conclusion? I asked my roommate and comrades-in-armsRainmanThe homepage of a project he created is1000pxWidth. When he adjusts the width1003pxWhenIE6The horizontal scroll bar is missing. Is the width of the right-side scroll bar different in different resolutions.

So, adjust the resolution1024*768, SetDiv # ContentOfWidthChange1004pxThe default width. In this case, pay attention to the problem that the height should be increased, or elseFirefoxThe scroll bar on the right of the window will not appear.

The result is displayed inIE6,IE7AndFirefox2The horizontal scroll bar is unavailable. Increase again when1005px,IE6AndIE7The horizontal scroll bar appears.1008px,Firefox2The scroll bar does not exist.

Draw on the last experience and maximize the window again. OK,1008px,IE7AndFirefox2There is no horizontal scroll bar;1012px,IE6There is no horizontal scroll bar.

By doing this, you will be suddenly enlightened. Although the current webpage width does not have to be greater1024px,

But I still can't help it. Make sure that the width is1280pxAnd1440pxResolution.

The following table lists the results:

Screen Resolution (width)	IE6(Scroll bar width, the same below)		IE7		Firefox2
	Standard	maximize	Standard	maximize	Standard	maximize
800px	28px	12px	20px	16px	24px	16px
1024px	20px	12px	20px	16px	16px	16px
1280px	20px	12px	20px	16px	16px	16px
1440px	20px	12px	20px	16px	16px	16px

We can see that in1024pxIf the width is higher than that, the width of the scroll bar of Each browser remains unchanged. From this table, I believe you will see more things. If you have enough time, we will test it next time.Opera.