Proposal for a scrollbar-safe width calculation

Discussing the scrollbar aspect of vw/vh units, several use cases came 
to my mind where I missed a possibility to take a possible scrollbar 
into account while setting widths in the past:

Use case 1: Centered web page
Very many web pages are horizontally centered using a container element 
that has the left and right margins set to "auto". Usually, they suffer 
from a horizontal jump of 8px when navigating between pages that have a 
vertical scrollbar or not. In my authoring practice, I had several 
discussions on this effect with clients or designers who demanded the 
page to stay in it's place regardless of the amount of content. Anyway, 
after I suggested to force scrollbars, they accepted the jump as the 
lesser evil (still considering it as an evil).

Use case 2: Scrolling table with fixed header
You put a table into a container div in order to make it scrollable 
inside the page. You use a negative top margin to hide the table header, 
and duplicate the header in a separate table that you put on the top of 
the container div. Now, if there are enough rows to trigger a vertical 
scrollbar, the columns of the visible header table do no longer match 
the columns of the scrollable table. (There are actually jQuery plugins 
for scrollable tables available, that do exactly this.)

The solution I propose is a property to be set on the container element 
that affects the calculation of the widths of the children (feel free to 
propose better wordings):

width-calculation: [normal | reserve-scrollbar]

When overflow computes to "auto", and the UA displays a non-overlayed 
scrollbar at all, "width-calculation: reserve-scrollbar" will shrink 
child elements to fit inside a possible scrollbar, if they have no width 
specified, and accordingly reduce the result if widths are specified in %.

Use case 1 would then simply be solved via
body { width-calculation: reserve-scrollbar }

In use case 2, the property will be applied to the containers of both 
header and content tables, so that the tables have identical widths 
regardless of whether a scrollbar is triggered or not.

I hope I have made myself understandable - I am sorry I am not a native 
English speaker (resp. writer).

-- 
Markus

Received on Thursday, 24 January 2013 22:16:33 UTC