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

reycri

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?

Sep 23 '06 #1

Subscribe Post Reply

12485

Ben C

On 2006-09-24, re****@gmail.com <re****@gmail.comwrote:

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 <tdit'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 <tdthe same--
it now (in accordance with CSS 2.1 17.5.3) makes the <tdbig enough for
its content.

The only fix I can come up with involves scripting:

I added this to the <headelement:

<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 <tdabove <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 <tdas 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.

Sep 24 '06 #2

reycri

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:

On 2006-09-24, re****@gmail.com <re****@gmail.comwrote:

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 <tdit'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 <tdthe same--
it now (in accordance with CSS 2.1 17.5.3) makes the <tdbig enough for
its content.

The only fix I can come up with involves scripting:

I added this to the <headelement:

<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 <tdabove <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 <tdas 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.

Sep 24 '06 #3

Ben C

On 2006-09-24, re****@gmail.com <re****@gmail.comwrote:

[...]
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:
>On 2006-09-24, re****@gmail.com <re****@gmail.comwrote:

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 <tdit'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 <tdthe same--
it now (in accordance with CSS 2.1 17.5.3) makes the <tdbig enough for
its content.

The only fix I can come up with involves scripting:

I added this to the <headelement:

<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 <tdabove <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 <tdas 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.

Sep 24 '06 #4

Markus Ernst

re****@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

Sep 25 '06 #5

by: Symphony | last post by:

Hi, all: I am using ie6 and vb.net developing the web site. on one .aspx page , we have several radio buttons( we did not use radio button list), only one of these button can be seleted. so I...

.NET Framework

scoll down a page to a certain position when reload the page

by: Symphony | last post by:

Hi, all: I am using ie6 and vb.net developing the web site. on one .aspx page , we have several radio buttons( we did not use radio button list), only one of these button can be seleted. so I...

ASP.NET

Tell if horizontal scoll bars are visible / active on a div layer.

by: ujjc001 | last post by:

Hello all. Is there a way to know if my datagrid is wider than my div layer? This is hard since the width on datagrid = 100% so it will not scroll, leaving the scrolling to the div layer. The...

ASP.NET

Scoll box for pictures

by: chrisdude911 | last post by:

HI How would i make a scroll box for pictures? Thanks Chris

Javascript

Scoll a table cell.

by: UJ | last post by:

How could I make a cell scroll. I have a cell that contains a datalist and I want to be able to have just the contents of the cell be scrollable; everything else for the table should remain...

ASP.NET

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

by: reycri | last post by:

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'...

HTML / CSS

confusion over is_expired and is_empty in CGI:Session

by: poolboi | last post by:

hey guys, i'm not sure if u guys have place this problem before i did an expiration of my CGI session for 1 min and i got the code below to detect if($session->is_expired) { print...

Perl

Need Help Making A Scoll Box And Putting Coding In To It For A Banner .

by: bazbella | last post by:

Hi I Need Help To Make A Scroll Box For My Web Page Also Need To Put Some Coding In To It Of A Banner For Poeple To Copy To Display Our Banner On There Page (my Space) Is There Some Sort Of...

HTML / CSS

How to hide fields/columns which are null

by: Conor | last post by:

Hello. I am very bad at ASP and use ASPRunner Pro to write ASP pages for me. I have come across a problem however which I cannot figure out. Quite simply on a list page I have six fields, ,,,,,....

ASP / Active Server Pages

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

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

Similar topics