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>Overfl ow Test</title>
</head>
<body style='overflow :hidden; margin:0; padding:0;'>
<table border='0' cellpadding='0' cellspacing='0'
style='border-collapse:collap se; width:100%; height:100%;'>
<tr><td colspan='2' style='height:3 em; border-bottom:1px solid
#666666; font-size:20pt;'>Cap tion Here</td></tr>
<tr>
<td style='width:16 em; border-right:1px solid #666666'>Naviga tion
Bar Here</td>
<td>
<div id='scrollingPa ne' 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 Reply

12539

Ben C

On 2006-09-24, re****@gmail.co m <re****@gmail.c omwrote:

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

<html>
<head>
<title>Overfl ow Test</title>
</head>
<body style='overflow :hidden; margin:0; padding:0;'>
<table border='0' cellpadding='0' cellspacing='0'
style='border-collapse:collap se; width:100%; height:100%;'>
<tr><td colspan='2' style='height:3 em; border-bottom:1px solid
#666666; font-size:20pt;'>Cap tion Here</td></tr>
<tr>
<td style='width:16 em; border-right:1px solid #666666'>Naviga tion
Bar Here</td>
<td>
<div id='scrollingPa ne' 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="scrollingPa ne"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="javas cript">
function resize()
{
var td = document.getEle mentById("scrol lingCell");
var style = getComputedStyl e(td, null);

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

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

// And put the content back
document.getEle mentById("conte nt").style.disp lay = "block";
}
window.onload = resize;
</script>

I gave the <tdabove <div id='scrollingPa ne'an id of 'scrollingCell' ,
and enclosed <div id='scrollingPa ne'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 getComputedStyl e, 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.co m <re****@gmail.c omwrote:

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

If the <div id="scrollingPa ne"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="javas cript">
function resize()
{
var td = document.getEle mentById("scrol lingCell");
var style = getComputedStyl e(td, null);

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

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

// And put the content back
document.getEle mentById("conte nt").style.disp lay = "block";
}
window.onload = resize;
</script>

I gave the <tdabove <div id='scrollingPa ne'an id of 'scrollingCell' ,
and enclosed <div id='scrollingPa ne'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 getComputedStyl e, 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.co m <re****@gmail.c omwrote:

[...]
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.co m <re****@gmail.c omwrote:

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

If the <div id="scrollingPa ne"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="javas cript">
function resize()
{
var td = document.getEle mentById("scrol lingCell");
var style = getComputedStyl e(td, null);

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

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

// And put the content back
document.getEle mentById("conte nt").style.disp lay = "block";
}
window.onload = resize;
</script>

I gave the <tdabove <div id='scrollingPa ne'an id of 'scrollingCell' ,
and enclosed <div id='scrollingPa ne'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 getComputedStyl e, 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.co m schrieb:

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

<html>
<head>
<title>Overfl ow Test</title>
</head>
<body style='overflow :hidden; margin:0; padding:0;'>
<table border='0' cellpadding='0' cellspacing='0'
style='border-collapse:collap se; width:100%; height:100%;'>
<tr><td colspan='2' style='height:3 em; border-bottom:1px solid
#666666; font-size:20pt;'>Cap tion Here</td></tr>
<tr>
<td style='width:16 em; border-right:1px solid #666666'>Naviga tion
Bar Here</td>
<td>
<div id='scrollingPa ne' 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="navigationB ar">
<div id="navigationC ontents">
Navigation Bar here
</div>
</div>
<div id="scrollingPa ne">
<div id="scrollingCo ntents">
<p>Content line</p>
<p>...</p>
</div>
</div>

And the CSS could be something like:

body {
margin:0;
padding:0;
overflow:hidden ;
}
#topBar {
position:absolu te;
top:0;
left:0;
width:100%;
height:3em;
z-index:3;
background: [sth. to cover the navigation bar border];
}
#navigationBar {
position:absolu te;
top:0;
left:0;
width:16em;
height:100%;
border-right:1px solid #666666;
z-index:2;
}
#navigationCont ents {
margin-top:3em;
}
#scrollingPane {
position:absolu te;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
#scrollingConte nts {
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

Similar topics

1593

when reload the web page, scoll dow the page to a certain position

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 uesed on button checked change event to contro all those buttons.( these button have set to be autopostback=true),when I click on one button, the page will auto postback and go to the top of the page, How can I scoll down the page to the position...

.NET Framework

1399

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

by: Symphony | last post by:

ASP.NET

1094

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 problem is when I set the height of the div layer so it will not scroll vertically (based on the height of the datagrid) if it scrolls horizontally I would need to add some height to the div so I can see the pager in full. Was that confusing? :)...

ASP.NET

2840

Scoll box for pictures

by: chrisdude911 | last post by:

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

Javascript

1106

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 constant. Any ideas how I would do this? TIA - Jeff.

ASP.NET

5212

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

by: reycri | last post by:

HTML / CSS

2706

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 $cgi->header(-cache_control=>"no-cache, no-store, must-revalidate");

Perl

1551

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 Coding Which I Got To Add To Keep The Coding In Thr Scroll Box Just Coding (banner) Can Any One Help Thanks Baz

HTML / CSS

3841

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, ,,,,,. Depending on who has logged in however, not all of these fields will contain a value. Each of these has its own column and is only displayed once via a SELECT DISTINCT statement. In other words for example is either populated or NULL, it can not be...

ASP / Active Server Pages

9275

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 effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10040

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9846

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9713

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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7248

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5142

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

3806

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3359

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2666

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General