100% Height DIV *inside TD* of auto height

HTML & CSS
1

Hi guys,

I did a search and also read the FAQ, but I can’t find an answer to this here or elsewhere on the internet.

My question is a little different from the usual “100% height floating liquid doodad”, because I ‘simply’ want a div inside a table cell that will occupy the full height of that cell, regardless of what it may be.

I don’t want the TD to be 100% height and I can’t assign a fixed height, because essentially it’s just going to expand according to content in another cell.

I’m using this doctype:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

And the table html is simply 3 columns, 3 rows of 100% width.
#mainTable
{
width: 100%;
border: 10px solid #fff;
padding: 0px;
margin: 0px;
}

Again, I don’t want the table to be 100% height of the view port.

The second row is ultimately my main content area, so it’s the row that will expand according to the amount of text in the center TD. I now want to place a DIV in the left-middle TD and have it set to 100% height:
#navigation
{
background-image: url(…/images/Navigation_Background.jpg);
background-repeat: repeat-y;
width: 143px;
height: 100%;
border-bottom: 1px solid #293F6F;
}

This works in Firefox, but NOT in ie and nothing I have tried so far - including adding 100% height to various parent elements - is working. I am not adverse to a Javascript solution, I just want something that works.

2

Hi,

Why can’t you assign the background image to the td or am i missing something obvious?

3

Hmmm … you had me thinking there, but a couple of points may stop such a simple solution:

  1. There is 10px padding between the TD and the div. If I assign a BG image to the TD, I couldn’t create this ‘whitespace’ could I?

  2. This 10px padding between TD and DIV is on top, bottom and left sides only.

  3. The DIV has a bottom border of 1px.

Is there a crafty way to duplicate this as you are suggesting?

4

OH! And the TD already has a BG image … the left border is one.

Maybe I’ll need to re-work the entire table design, but that seems somewhat heavy handed until I KNOW it’s necessary.

5

Well you could simply accomodate the existing border image and the div background and the left padding all in one image. Couldn’t the border on the bottom of the div be a bottom border on the td instead.

I’d really need to see an example of what you are trying to do to get a good idea of which way to go. 100% height on auto height containers is usually a no no so if you can move everything to the td you will be much better off :wink:

6

Hi,

You can do what you want in IE if you force quirks mode.

e.g.


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- force quirks mode with the xml prologue -->
<style type="text/css">
table#main{
width:50%;
}
.bg {
 background: url(img.jpg) repeat-y left top;
}
.bg,.bg2{height:100%;}
</style>
</head>
<body>
<table id="main" cellspacing="0" cellpadding="0">
  <tr> 
	<td class="bg"> 
 <div class="bg2" > 
		<p>hello</p>
	  </div></td>
	<td><p>hello</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p>a</p>
	  <p></p>
	  <p>a</p>
	  <p>a</p></td>
	<td>&nbsp;</td>
  </tr>
  <tr> 
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
  </tr>
  <tr> 
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

I think that’s the only way it will work in IE in the way that you want it.

7

Would this force quirks mode JUST for IE?

I’m somewhat loathed to post huge chunks of code … but …


html, body {height: 100%; width: 100%;}

body *
	{ font-size: 11px; }
	
body
	{
	padding: 0px;
	margin: 0px;
	font-weight: normal;
	font-family: Tahoma, Verdana, helvetica, Arial;
	color: #000;
	background: #fff none;
	}


/* header */

#cleanVia_Header
{
	background-color: #fff;
	background-image: url(../images/CleanVia_Banner_Background.jpg);
	background-repeat: repeat-x;
	height: 69px;
	margin: 0px;
	padding: 0px;
}

/* title bar */

#cleanVia_TitleBar
{
	background-color: #fff;
	background-image: url(../images/TitleBar.jpg);
	background-repeat: repeat-x;
	height: 31px;
	margin: 0px;
	padding: 0px;
}

#mainTable
{
	width: 100%;
	border: 10px solid #fff;
	padding: 0px;
	margin: 0px;
}


#topLeft
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-x;
	height: 12px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}
#topSplit
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-x;
	height: 12px;
}
#topRight
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-x;
	height: 12px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}
#navCol
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-y;
	padding-left: 10px;
}
#split
{
}
#content
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-y;
	background-position: right;
	padding-left: 10px;
	padding-right: 10px;
}
#bottomLeft
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 12px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}
#bottomSplit
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}
#bottomRight
{
	background-image: url(../images/block.gif);
	background-repeat: repeat-x;
	background-position: bottom;
	height: 12px;
	border: 0px;
	margin: 0px;
	padding: 0px;
}


#navigation
{
	background-image: url(../images/Navigation_Background.jpg);
	background-repeat: repeat-y;
	width: 143px;
	height: 100%;
	border-bottom: 1px solid #293F6F;
	font-size: 12px;
}

#navigation a
{
	padding: 4px 0 0 20px;
	height: 18px;
	text-decoration: none;
	border-bottom: solid 1px #fff;
	overflow: hidden;
}

a.navParent_Active
{
	background-image: url(../images/navParent_Background.jpg);
	cursor: default;
	font-weight: bold;
	display: block;
}
a.navParent
{
	background-color: #99A9C3;
	background-image: url(../images/plus.gif);
	background-repeat: no-repeat;
	background-position: 4px 7px;
	color: #fff;
	font-weight: bold;
	display: block;
}
a:hover.navParent
	{color: #000;}
	
a.navChild
	{background-color: #FFE681;display: block;}
a:hover.navChild
	{background-color: #FDF3C9;}
a.navChild_Active
	{background-color: #FDF3C9;display: block; border-right: 1px solid #293F6F;}
a:hover.navChild_Active
	{background-color: #FDF3C9;}
	
a.navChild2
	{background-color: #CDE39A; display: block;}
a:hover.navChild2
	{background-color: #E5F2C7;}
a.navChild2_Active
	{background-color: #E5F2C7; display: block; border-right: 1px solid #293F6F;}
a:hover.navChild2_Active
	{background-color: #E5F2C7;}
	
a.navHidden
	{display: none; }
	
div.splitBar
{
	margin: 0;
	padding: 0px;
	height: 1px;
	width: 4px;
	border-bottom: #293F6F solid 4px;
	overflow: hidden;
}

And the html …





<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="VI60_defaultClientScript" content="JavaScript">
<meta name="keywords" content="">
<meta name="description" content="">
<meta name="AUTHOR" content="natalya">
<title>CleanVia Home</title>

<link rel="stylesheet" Media="screen, projection" href="css/CleanVia.css" type="text/css" title="CleanVia css" />
</head>

<body>

<div id=cleanVia_Header><img src="images/CleanVia_Banner_Title.jpg" border=0 height=69 width=324 title="CleanVia"
</div><div id=cleanVia_TitleBar><img src="images/TitleBar_Text.jpg" border=0 width=321 height=31 title="Sustainable in Nature | Proven in Industry"></div>

<table id=mainTable cellspacing=0 cellpadding=0 border=0>
	<colgroup>
		<col/>
		<col/>
		<col/>
	</colgroup>
	<tbody>
		<tr>
			<td id=topLeft align=left valign=top height=12 width=12><img src="images/top_left.gif" height=12 width=12 border=0></td>
			<td id=topSplit height=12></td>
			<td id=topRight align=right valign=top height=12><img src="images/top_right.gif" height=12 width=12 border=0></td>
		</tr>
		<tr>
			<td id=navCol align=left valign=top>
				<div id=navigation><a href="home.asp" title="CleanVia Home" class=navParent_Active>Home</a><a href="whats_new.asp" title="What's New at CleanVia" class=navChild>What's New</a><a href="calendar.asp" title="Calendar" class=navChild>Calendar</a><a href="contact_us.asp" title="Contact CleanVia" class=navChild>Contact Us</a><a href="locations_maps.asp" title="CleanVia Locations and Maps" class=navChild>Locations / Maps</a><a href="community.asp" title="Community" class=navChild>Community</a><a href="technology.asp" title="Technology" class=navParent>Technology</a><a href="frequent_questions.asp" title="Frequently Asked Questions" class=navParent>Frequent Questions</a><a href="products.asp" title="CleanVia Products" class=navParent>Products</a><a href="cv_multiuse_cleaner.asp" title="CleanVia Multi-use Cleaner" class=navHidden>CV Multi-Use Cleaner</a><a href="cv-1000_concentrate.asp" title="CleanVia CV-1000 Concentrate" class=navHidden>CV-1000 concentrate</a><a href="viasolve_21.asp" title="ViaSolve 21" class=navHidden>ViaSolve 21</a><a href="viasolve_54.asp" title="ViaSolve 54" class=navHidden>ViaSolve 54</a><a href="viasolve_lubricants.asp" title="ViaSolve Lubricants" class=navHidden>ViaSolve Lubricants</a><a href="bio-fuels.asp" title="Bio Fuels" class=navHidden>Bio-Fuels</a><a href="containers.asp" title="Containers" class=navHidden>Containers</a><a href="dispensers.asp" title="Dispensers" class=navHidden>Dispensers</a><a href="pumps.asp" title="Pumps" class=navHidden>Pumps</a><a href="hand_tools.asp" title="Hand Tools" class=navHidden>Hand Tools</a><a href="hoses.asp" title="Hoses" class=navHidden>Hoses</a><a href="parts.asp" title="Parts" class=navHidden>Parts</a></div>
			</td>
			<td id=split valign=top><div class=splitBar></div></td>
			<td id=content align=left valign=top>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla arcu dolor, varius aliquam, sagittis vel, pharetra eget, nibh. Sed suscipit sodales ante. Suspendisse potenti. Fusce suscipit, lacus quis ultricies accumsan, sapien leo lobortis tellus, sed pellentesque magna nibh sit amet nulla. Nunc commodo suscipit neque. Pellentesque mollis, nunc vel condimentum molestie, nibh lectus imperdiet libero, vitae blandit arcu lectus a nunc. Nullam sed nibh. Pellentesque tincidunt dapibus risus. Duis fermentum neque eget pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aenean libero. Cras consequat, ante in gravida venenatis, tellus ipsum accumsan wisi, quis viverra wisi enim id risus. Suspendisse potenti. Donec ligula. Curabitur dignissim lectus id mi. In hendrerit tincidunt est. Proin vestibulum adipiscing pede. Aliquam feugiat facilisis neque.
<p>
Vestibulum viverra. Aenean molestie urna vitae ipsum. Praesent ultrices. In hac habitasse platea dictumst. Nullam nec ligula quis magna laoreet mattis. Nam ullamcorper. Cras sodales augue eget diam. Phasellus purus turpis, sodales non, tempus at, tincidunt ac, lectus. Donec dignissim tincidunt felis. Suspendisse vel justo. Etiam aliquet nisl ut pede tempor interdum. Cras vitae orci. Mauris ac lorem. Proin dolor. Morbi scelerisque aliquet est. Donec id felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec lacinia mattis metus. Nullam odio neque, condimentum ut, fringilla vel, vestibulum sed, nibh.
<p>
Vestibulum at arcu. Nam felis diam, vestibulum rutrum, vestibulum ut, varius in, orci. Etiam semper. Fusce posuere adipiscing pede. Vestibulum convallis est. Cras turpis mi, feugiat id, condimentum sit amet, lacinia vel, enim. Suspendisse nunc. Fusce ut enim. Curabitur vestibulum auctor risus. Quisque et est ac dui pulvinar euismod.

</td>
		</tr>
		<tr>
			<td id=bottomLeft align=left valign=bottom height=12 width=12><img src="images/bottom_left.gif" height=12 width=12 border=0></td>
			<td id=bottomSplit></td>
			<td id=bottomRight align=right valign=bottom height=12><img src="images/bottom_right.gif" height=12 width=12 border=0></td>
		</tr>
	</tbody>
</table>





</body>
</html>

The net result should look like the screenshot (left image).

8

Hi,

Would this force quirks mode JUST for IE?

To put ie6 into quirks mode you can use comments above the doctype when using an xhtml doctype (or use the xml prologue as in my code above). Or if you are using an html doctype then you need to leave out the uri from the doctype as follows.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

That will put ie6 into quirks mode. Ie5 and 5.5. are always in quirks mode no matter what you use. be aware that in quirks mode IE uses the broken box model (see faq).

Other browsers have their different triggers for quirks mode but they all use the correct box model (although I think opera7 will imitate the broken box model in quirks mode also.)

For more info on doctypes look here:

http://www.ericmeyeroncss.com/bonus/render-mode.html

http://www.quirksmode.org/css/quirksmode.html

9

Thanks for the feedback, I’ll play with that a little I think … the background image MAY work (something about cheating doctypes doesn’t sit right with me), but either solution is a good one; thanks.

10

Well - curiously - placing ie into quirks mode did nothing to the height of the DIV, which kinda throws me. I tried adding this (as per your guidelines):

<?xml version=“1.0” encoding=“iso-8859-1”?>
<!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”>

And then I took the doctype declaration out altogether, and in IE it made no difference. I’ll clearly have to play with the background image.

11

I had it working locally fine :).

You need to apply a height:100% to the table cell that holds the div so that the div has something to base its height on.

12

AH! That was it :stuck_out_tongue:

Thanks for the assistance :slight_smile:

13

I was just going to post an example so I will anyway lol :slight_smile:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#main{width:50%}
td.bg{height:100%; width:160px}
div.test{
height:100%;
background:url([file:///C|/Documents%20and%20Settings/Paul/My%20Documents/websites/testing2/images/bigfade.jpg](file:///C|/Documents%20and%20Settings/Paul/My%20Documents/websites/testing2/images/bigfade.jpg)) repeat-y left top;
margin-left:10px;
width:150px;
}
</style>
</head>
<body>
<table id="main" cellspacing="0" cellpadding="0">
  <tr> 
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
  </tr>
  <tr> 
	<td class="bg"><div class="test">Test</div></td>
	<td><p>1</p>
	  <p>2</p>
	  <p>3</p>
	  <p>4</p>
	  <p>5</p>
	  <p>6</p>
	  <p>7</p>
	  <p>8</p>
	  <p>9</p>
	  <p>0</p>
	  <p>1</p>
	  <p>2</p>
	  <p>3</p>
	  <p>4</p></td>
	<td>&nbsp;</td>
  </tr>
  <tr> 
	<td>&nbsp;</td>
	<td>&nbsp;</td>
	<td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Glad it helped anyway :slight_smile:

14

Well yeah, it did … but the quirks mode bugs me and may just bring up other issues, so in the long run I may explore the TD background angle you brought up … obvious really, when another set of eyes is on it :stuck_out_tongue: