Click here to get back home

overflow:auto (or scoll) and height:100%
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
overflow:auto (or scoll) and height:100% reycri 09-23-2006
Posted by reycri on September 23, 2006, 8:03 pm
Please log in for more thread options

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

<html>
<head>
<title>Overflow Test</title>
</head>
<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>
<tr>
<td style='width:16em; border-right:1px solid #666666'>Navigation
Bar Here</td>
<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>
</div>
</td>
</tr>
</table>
</body>
</html>

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?


Posted by Ben C on September 24, 2006, 5:33 am
Please log in for more thread options

> I have a page that works as I intend in IE but not in Firefox:
>
><html>
><head>
> <title>Overflow Test</title>
></head>
><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>
> <tr>
> <td style='width:16em; border-right:1px solid #666666'>Navigation
> Bar Here</td>
> <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>
> </div>
> </td>
> </tr>
> </table>
></body>
></html>
>
> 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?

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;
</script>

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.

Posted by reycri on September 24, 2006, 4:50 pm
Please log in for more thread options


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:
>
> 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;
> </script>
>
> 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.


Posted by Ben C on September 24, 2006, 5:46 pm
Please log in for more thread options


> [...]
> 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....

Good point.

> Ben C wrote:
>>
>> 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;
>> </script>
>>
>> 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.

Posted by Markus Ernst on September 25, 2006, 4:04 am
Please log in for more thread options


reycri@gmail.com schrieb:
> I have a page that works as I intend in IE but not in Firefox:
>
> <html>
> <head>
> <title>Overflow Test</title>
> </head>
> <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>
> <tr>
> <td style='width:16em; border-right:1px solid #666666'>Navigation
> Bar Here</td>
> <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>
> </div>
> </td>
> </tr>
> </table>
> </body>
> </html>

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>
<div id="navigationBar">
<div id="navigationContents">
Navigation Bar here
</div>
</div>
<div id="scrollingPane">
<div id="scrollingContents">
<p>Content line</p>
<p>...</p>
</div>
</div>

And the CSS could be something like:

body {
margin:0;
padding:0;
overflow:hidden;
}
#topBar {
position:absolute;
top:0;
left:0;
width:100%;
height:3em;
z-index:3;
background: [sth. to cover the navigation bar border];
}
#navigationBar {
position:absolute;
top:0;
left:0;
width:16em;
height:100%;
border-right:1px solid #666666;
z-index:2;
}
#navigationContents {
margin-top:3em;
}
#scrollingPane {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
#scrollingContents {
margin:3em 0 0 16em;
padding:0.5em;
overflow:auto;
}

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

HTH
Markus

Similar ThreadsPosted
overflow:auto issue in XHTML standards mode October 11, 2006, 10:25 am
DIV height and overflow May 6, 2008, 11:43 am
Overflow to the sides of a div October 17, 2005, 3:48 pm
overflow question July 21, 2006, 5:24 pm
Overflow Hidden not hiding in IE May 8, 2006, 11:44 am
Make textboxs height = the height of the cell it's in minus (n)px August 6, 2004, 6:37 am
Adjust height base on the the height of the browser window. October 20, 2006, 4:23 pm
Overflow: scroll scrollbar colors? November 19, 2005, 11:49 pm
aww, ciwah Regs only: overflow work April 5, 2008, 8:11 am
Auto resizing February 4, 2005, 10:33 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap