用于强制浏览器显示滚动条的CSS

Question

I've written a web application and found that when I resize the page, the browser doesn't display it's own scrollbar as the window shrinks. This prevents the user from accessing content. I've set my body width to 500px and set the navbar to white-space:nowrap . How can I get the browser to recognize that there is content to the right of the screen?

Just to clarify I want the browser's scrollbar and not a scroll bar on any control.

Answer 1

You can use one of the following depending on whether you want horizontal, vertical, or both scrollbars to be added:

body    {overflow-x:scroll;}
body    {overflow-y:scroll;}
body    {overflow:scroll;}

However, I think if you show the content in a section and then do

#id-of_your_div {overflow:scroll;}

So that you add scroll to the div rather than force the browser to show scrollbars, then your page will provide a much better user experience since such scrollbars are easier for users to access.

Answer 2

您可以将body / element的高度或宽度设置为100.1％，具体取决于您希望可滚动的方向和元素。

Answer 3

Instead of playing with the width, use the code that was intended for this purpose. The following CSS will force a scroll-bar to be present whether it's needed or not.

for both scroll-bars...

body {
    overflow: scroll;
}

or just for a horizontal scroll-bar...

body {
    overflow-x: scroll;
}