HTML / CSS Enhancement

Question

It has some difficulty scaling HTML elements. In FF or Chrome, take a look at (very, very simple, small code):

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

Select 150% from the drop-down list. The black and white gradient cabinet will scale to 150% of its original size. Now that it is scaled, notice that a horizontal scrollbar appears and the vertical scrollbar expands to fit the new, larger, scaled height and width.

Now switch from 150% to 50%. The gradient scale does scale to 50%, but note that the (vertical) scrollbar does not shrink to fit the new, smaller, scaled height. Instead, there is empty empty space in the gradient box.

Why do browsers update scrollbars to scale more than 100%, but not less than 100%? How can I get the same behavior for less than 100%, as I do with more than 100%? I do not want this gap.

Answer 1

I have some idea of ​​what is going on:

Scaling affects only the gradient field, and not the container div inside which it is located. Therefore, when you scale the field to 150%, the size of the window is now comparable to the size of the div container inside (the div container is always 496x250), so it puts scrollbars.

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

There can be several different ways for this. The main problem is that you are not handling the resizing / scaling of the div container.

Answer 2

changed something in the violin. check if this is valid:

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

then the scrollbars are based on 100% size and larger. note that the 100% scroll bar and 50% scroll bar have the same “size” when doing 150% - this is the only time it gets smaller.