overflow:auto (or scoll) and height:100%

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

I have a page that works as I intend in IE but not in Firefox:

 <title>Overflow Test</title>
<body style='overflow:hidden; margin:0; padding:0;'>
 <table border='0' cellpadding='0' cellspacing='0'
style='border-collapse:collapse; width:100%; height:100%;'>
  <tr><td colspan='2' style='height:3em; border-bottom:1px solid
#666666; font-size:20pt;'>Caption Here</td></tr>
   <td style='width:16em; border-right:1px solid #666666'>Navigation
Bar Here</td>
    <div id='scrollingPane' style='overflow:auto; width:100%;
height:100%; padding:.5em .5em .5em .5em;'>
     Line 01<br>
     Line 02<br>
     Line 03<br>
     Line 04<br>
     ... lots more lines<br>

Basically, the top level table should always cover the whole viewport
(<body>) which has overflow hidden - ie: it should never have a
scrollbar but should not clip anything unless the browser window is
resized to a very small window. The top bar will have a fixed height
and it's width will always occupy the whole width of the viewport. The
nav bar on the left will have a fixed width but it's height will occupy
what's left of the viewport after the top bar is rendered. The
scrollingPane area will occupy the rest and have a scrollbar if it
needs to.

The problem is the overflow:auto on the div with the id 'scrollingPane'
does not work. After some research, I found out that this is because
the width and height properties are this div is reverting back to auto
because it's parent does not have a width and height property.

Unfortunately, I can't figure out what value to put on this property.
"100%" will not work because it means "have the same width as the
containing element". What I need is to be able to set the width/height
to a value that says "occupy the width (or height) that is left after
all the siblings within this block have been sized".

How can I achieve this?

Re: overflow:auto (or scoll) and height:100%

Quoted text here. Click to load it

That's just what auto width and height mean, but the problem is they're
treated as minimums.

If the <div id="scrollingPane"> has nothing much in it, the table
formatter sizes the <td> it's in so that the other rows and columns and
the table itself mostly get the sizes you asked for.

Ideally you'd like to take the computed width and height of that <td>
and set them on the <div>, so that its content overflows and can be
scrolled by setting overflow: scroll.

The problem is that as soon as you put the content in the <div>, the
table formatter no longer computes the dimensions of the <td> the same--
it now (in accordance with CSS 2.1 17.5.3) makes the <td> big enough for
its content.

The only fix I can come up with involves scripting:

I added this to the <head> element:

<script language="javascript">
    function resize()
        var td = document.getElementById("scrollingCell");
        var style = getComputedStyle(td, null);

        // Get the height computed by the table formatter for this cell in the
        // absence of any content.
        var div = document.getElementById("scrollingPane");

        // Fix on those dimensions
        div.style.width = style.width;
        div.style.height = style.height;

        // And put the content back
        document.getElementById("content").style.display = "block";
    window.onload = resize;

I gave the <td> above <div id='scrollingPane'> an id of 'scrollingCell',
and enclosed <div id='scrollingPane'> in another div like this:

            <div id="content" style="display: none">
                Line 01<br>

The browser first formats the <td> as if it had no content. This works
fine-- the table is 100% x 100% so fills the viewport, the nav bar has a
width, the caption has a height, and the td gets the space that's left.

Then we grab those values with getComputedStyle, set them in stone, and
put the content back, which now overflows and produces scrollbars.

I'd also be interested to see if there's a better solution that doesn't
involve scripting.

Re: overflow:auto (or scoll) and height:100%

Thanks Ben...

I don't think what 'auto' means is not exactly the same as what I said
I want. What I want is for the scrolling area to explicitly size itself
to 100% of what's left after the caption and navbar are rendered. This
also means keeping the caption and navbar to their minimum height and
width, respectively. And more importantly, allowing the div inside it
to have an explicit height (other than auto) that will allow it's
overflow:auto/scroll to take effect.
The solution you suggest will work but it will also have to monitor the
onresize event of the top level table or window to constantly recompute
the proper size of the div. I was trying to avoid this....
I found this morning style properties called min-width and min-height
which I use (if the browsers recognize them) with the nav bar and
caption, respectively, to keep them from become wider/taller than
intended but it still does not solve the problem of having the div
recognize the overflow:auto/scroll style properties.
Is there no CSS solution to this?

Ben C wrote:
Quoted text here. Click to load it

Re: overflow:auto (or scoll) and height:100%

Quoted text here. Click to load it

Good point.

Re: overflow:auto (or scoll) and height:100%

reycri@gmail.com schrieb:
Quoted text here. Click to load it

Try to avoid table layout - I assume for what you want to do the HTML
body could look something like:

<div id="topBar">
   Top bar contents here
<div id="navigationBar">
   <div id="navigationContents">
     Navigation Bar here
<div id="scrollingPane">
   <div id="scrollingContents">
     <p>Content line</p>

And the CSS could be something like:

body {
#topBar {
   background: [sth. to cover the navigation bar border];
#navigationBar {
   border-right:1px solid #666666;
#navigationContents {
#scrollingPane {
#scrollingContents {
   margin:3em 0 0 16em;

Not tested, you might get better suggestions from CSS experts.


Site Timeline