HTML/CSS zooming

Question

Having some difficulties with zooming HTML elements. In FF or Chrome, take a look at (very, very simple, small code):

http://jsfiddle.net/92wHQ/4/

From the drop down, select 150%. The black and white gradient box will scale to 150% of its origin size. Now that it's scaled, notice that the horizontal scroll bar appears and the vertical scroll bar expands to accommodate the new, larger, scaled height and width.

Now switch from 150% to 50%. The gradient box does indeed scale to 50%, but notice that the (vertical) scroll bar does not contract to accommodate the new, smaller, scaled height. Instead, there's a bunch of empty white space under the gradient box.

How come browsers refresh the scroll bars for scaling greater than 100%, but not less than 100%? How can I get the same behavior for the less than 100% as I do with greater than 100%? I don't want this white space.

Answer 1

I have some insight into what is happening:

The scaling affects only the gradient box, but not the container div which it is inside. So when you scale the box to 150%, the box is now comparitively bigger than the size of the container div it's inside (the container div is always 496x250), so it places scrollbars.

On the other hand, when you make it smaller, then the gradient box is smaller than the container div its inside, so there is no need for scrollbars.

There could be a few different ways to handle this. The main issue is that you are not handling the resizing/scaling of the container div.