Need an overflow scrollbar on a div with 100% height

jag5311 · June 7, 2006, 8:04pm

I cannot seem to figure this out for the life of me.

I am using a basic table (Yes, stop looking at me like that) so that I can have equal height columns (3 of them).

The left and right are fixed width, the center is fluid.

I then have a div in the center that is set to 100% height but I want it to have a scrollbar so you don’t have to utlize the default browser scrollbar.

I set it to overflow: auto; along with height: 100%; but it ends up reaching the entire browser height (actually goes past it) and never uses the overflow scrollbar.

If I then add 1 more set of div tags and give THOSE 100% height and overflow: auto;, then IE runs the page PERFECTLY, but Firefox doesn’t.

In a nutshell, the page is setup like this


<td>
<div id="centercontent">
  <div id="flow">
blah blah blah A LOT OF TIMES TO MAKE SCROLLBAR
</div>
</div>
</td>

So both Center Content and Flow have a height of 100% and overflow: auto;

IE treats the page great. Firefox doesn’t ever get the internal scrollbar.

Thanks

Any solutions?

Thanks
Bryan

jag5311 · June 7, 2006, 9:12pm

Here is my HTML if someone wants to test it.

Yes, it works in IE because of quirks mode, so I NEED to leave that alone and find an alternative to Firefox and/or other browsers.

Thanks.


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin: 0px; padding: 0px;}
html, body {height: 100%;}
body {padding-right: 10px; padding-left: 10px;}
table#main {border-collapse: collapse; width: 100%; height: 100%;}
table#main td {vertical-align: top;}
td#leftcol {width: 240px;height: 100%;}
td#contentcol {width: 100%;height: 100%; background: #fff; padding-right: 10px; padding-left: 10px;}
td#rightcol {width: 250px;height: 100%; background: #666666;}
div#leftcontent {width: 240px; height: 100%;}
div#rightcontent {width: 250px; padding: 10px;}
div#centercontent {height: 100%;font-size: 12px;}
div#centercontent p {padding-top: 15px; padding-bottom: 15px; border-bottom: solid 1px #eee;}
#divChatForm {height: 80%; background: #ebf9ff; padding: 10px; border: solid 1px #c8e1ec; min-height: 240px;}
div#searchresults {padding: 10px 25px; overflow:auto; height: 100%; position:relative;}
#divChatForm #divChatArea {height: 80%; width: 100%; background: #fff; border: solid 1px #9cc3d3;}

.button {width: 150px; margin-top: 5px;}

div#header {padding: 15px 10px 10px 25px;}
div#logo {float: left; width: 110px; margin-right: 20px;}
div#search {float: left; width: 400px;}

table#searchbar {height: 100%;}
table#searchbar td#searchleft {width: 240px;height: 100%;}


div#footer {text-align: center; padding-top: 5px; padding-bottom: 5px; border-top: solid 1px #eee; margin-top: 10px;}

</style>
<!--[if IE]>
<link href="test-col-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body>
<table id="main">
<tr>
<td colspan="3">
	<div id="header">
	<div id="logo"></div>
	<div id="search">
	</div>
	<br clear="all" />
	<div style="clear: both;"></div>
	</div>
</td>
</tr>
<tr>
	<td id="leftcol">
		<div id="leftcontent">
		<table id="searchbar">
		<tr>
		<td id="searchleft">

		</td>
		</tr>
		</table>
		</div>
	</td>
	<td id="contentcol">
	<div id="centercontent">
		<div id="searchresults">
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		<p><strong>Netscape 4, CSS layout, 3 columns with Header and Footer</strong><br />
Because of NN4's loss of styling information on resizing, the layout includes some javascript to force NN4 to reload which overcomes this bug ...
<a href="http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml">www.fu2k.org/alex/css/...</a> - 12k - Cached - Similar pages</p>
		</div>

	</div>
	</td>
	<td id="rightcol">
		<div id="rightcontent">Right Column</div>
	
	</td>
</tr>
<tr>
<td colspan="3">
<div id="footer"></div>
</td>
</tr>
</table>
</body>
</html>

Tyssen · June 7, 2006, 10:41pm

You should take a look at this: http://www.cssplay.co.uk/layouts/body5.html
And maybe check out some of the fixed examples on Paul’s site: http://www.pmob.co.uk

jag5311 · June 8, 2006, 4:59pm

Thanks.

Ok, I need some help then.

Can anyone take the layout at this link:

http://www.cssplay.co.uk/layouts/body5.html

Remove the 3rd column and make it so the LEFT and RIGHT columns are 250px each, and the center column is fluid between the 2 WITH the scrollbar associated with it.

Thanks,
Bryan

PaulOB · June 8, 2006, 8:38pm

Hi,

I haven’t got a lot of time to look at this because i’m away for 10 days in the morning but something like this.

Remove #left3 (and its inner) from the html and then use this css.


<style type="text/css">
html {
height:100%; 
max-height:100%; 
padding:0; 
margin:0; 
border:0; 
background:#fff; 
font-size:76%; 
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */ 
/* \\*/ 
overflow: hidden; 
/* */ 
}
body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
#head {position:absolute; margin:0; top:0; left:0; display:block; width:100%; height:100px; background:url(fish.jpg) rgb(233,238,242); background-repeat:no-repeat; font-size:4em; z-index:5; color:#fff;}
#foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; background:rgb(233,238,242); font-size:0.8em; z-index:5; text-align:right; color:rgb(157,78,84);}
#left1, #left2, #left3, #left4 {position:absolute; left:0; top:100px; bottom:50px; width:250px; font-size:1em; 
z-index:4; overflow:auto;}
* html #left1, * html #left2, * html #left3, * html #left4 {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff;}
#left1 {left:0; background:rgb(237,228,214);}
#left2 {left:250px;right:250px;width:auto; background:rgb(243,217,188);overflow-x:hidden;z-index:3}
* html #left2{right:230px;}
#left4 {right:0; left:auto;background:rgb(229,218,212);z-index:1}
.inner {display:block; padding:0 10px 10px 10px;}
* html #left2 .inner{padding-right:30px;}
.bold {font-size:1.5em; font-weight:bold;}
</style>

As i said I’ve only done that in a couple of minutes so it’s untested. (I’ve no idea what ie7 will make of it anyway.)

jag5311 · June 8, 2006, 9:15pm

Paul, I wish I could say some cuss words (in a good way) to express my gratitude for what you have done. I know you didn’t test it much, but man, so far it works in IE, FF, Safari, and FF (mac).

Haven’t tested in IE 7 yet.

THANKS!

jag5311 · June 12, 2006, 1:07pm

Paul (who is probably on vacation) or anyone else.

Is there a workaround to the width: auto; for #left2, because in IE, it only displays the width based on the content, and I really need it to fit the same window that Firefox does when using width: auto;

width: 100% seems to give me poor results.

PaulOB · June 12, 2006, 2:24pm

I am away but just checked my email

Add this:


* html .inner{height:1%}

and delete this:


* html #left2{right:230px;}

I probably won’t reply again until the 19th June

jag5311 · June 12, 2006, 5:12pm

Thanks Paul.!