set overflow hidden in some cases

Question

Hello, my question is

How can I set overflow hidden in cases where the html go's outside the screen

Right now I have set html {overflow: hidden;} in the head tag off the page. So, it's hidden all the time

In my particular case the errors that I show in the registration process cannot be seen on my 13inch laptop, but I don't want to show the scrollbars all the time.

That's why I want it to set(or unset) based on the fact if there is overflow or not.

What would be the best way?

thanks, Richard

Answer 1

How about something like this:

<div id="overflowHidden" style="overflow:hidden;">
    <div id="contentContainer">
        Content goes here
    </div>
</div>

Set a height on #overflowHidden and, when the content changes in #contentContainer, check the height compared to that of #overflowHidden and set the overflow attribute on #overflowHidden as appropriate.

Not the most elegant solution, but it would be fairly easy to turn on and off (for testing v. production).

Answer 2

Will 'overflow:auto' not suffice?

http://www.w3.org/TR/CSS2/visufx.html

auto:The behavior of the 'auto' value is user agent-dependent, but should cause a scrolling mechanism to be provided for overflowing boxes

Answer 3

Would it help if you only set the scrollbar for vertical scrolling?

You could do this using overflow-y: auto; and overflow-x: hidden;

This will show a vertical scrollbar (only when you need it), but will not show a horizontal scrollbar. This way the hidden divs with negative property won't show, even if you decide to show the scrollbars.