Home > DeveloperSection > Forums > CSS 100% width but avoid scrollbar
lois waisbrooker
lois waisbrooker

Total Post:70

Posted on    March-12-2013 2:18 AM


 1 Reply(s)
 3157  View(s)
Rate this:

Hi Everyone!

This is probably a variation on something that has been solved dozens of times but CSS really makes me feel like a fool.

I am trying to build a widget that can be positioned and sized in a variety of ways. It's a pretty simple layout - fixed-height header, fixed-height footer,

and a body that takes up the remaining space. The overall width and height varies. The content of the body needs to scroll. I have the overall container,

header, footer, and body sizing ok.

But what I want is for the body to scroll when it needs to WITHOUT shrinking content to the left when the scrollbar appears. That is, I want the body to be

as wide as it can MINUS the scrollbar that would be there iF it needed to scroll, so that when it DOES need to scroll there is no shrink. In effect, I want


| - - - unknown width - - -|
| content                |*|
| might                  |*|
| scroll                 |*|
I want the content that might scroll to be as wide as it can MINUS the potential scrollbar width (|*| region).

What I have now is something like this:

<div id="content" style="position: absolute; overflow-y: auto; width: 100%">
    <div id="scrollContent" style="???">
I have tried margins, padding, even %-widths for the inner-most div and all 'do the shift' thing. I also need this to work in FF3, IE7/8 and (fantasy?) IE6.


Total Post:604

Posted on    March-12-2013 8:35 AM

Hi Lois!

set overflow: scroll instead of overflow: auto

that'll force a scrollbar to always appear in vertically and horizontally.

Don't want to miss updates? Please click the below button!

Follow MindStick