XHTML - Fixed row in 100% height table (XTML)

2008-01-15

I have a problem .. i have a 100% height table with three rows ... i need fixed height of first row and last row ..

i defined height 100% to body and html so the 100% table height work .. but i can't fix heights of first and last row ...

if i change doctype to html 4.01 works ok .. but in xhtml 1.1 transitional doesn't .. is there any solution ? ...page must be validated

thnx

Adam · 2008-01-15 #2

100% height by in HTML only works in < HTML 4.01

What are you trying to do and I'll see if i have a solution for you.

Uros · 2008-01-16 #3

I allready have 100% height table in xhtml (100% defined in CSS) .. My problem is that i can't fix height of first and last row ..

Adam · 2008-01-16 #4

sorry, misread you before. have you tried applying a class to the the rows. i.e.

<tr class="firstRow">

and giving the row a height in css

tr.firstRow {height:1.4em;}

mrsnrub007 · 2008-01-16 #5

Table rows (the tr element) aren't rendered, they only define where a set of table cells (th and td elements) begins and ends. Because the tr element has no screen presence, it's pretty much unstylable; you need to apply your styles to the row's children instead:

Code:

tr.first-row th, tr.first-row td { height: 10em; }
tr.third-row th, tr.first-row td { height: 6em; }

Codemonkey · 2008-01-16 #6

Quote: Originally Posted by mrsnrub007

Table rows (the tr element) aren't rendered, they only define where a set of table cells (th and td elements) begins and ends. Because the tr element has no screen presence, it's pretty much unstylable; you need to apply your styles to the row's children instead:

Code:

tr.first-row th, tr.first-row td { height: 10em; }
tr.third-row th, tr.first-row td { height: 6em; }

That is, styles regarding size. You can safely define for example color styles, since they are inherited by child elements.

Codemonkey · 2008-01-16 #7

Quote: Originally Posted by Uros

I have a problem .. i have a 100% height table with three rows ... i need fixed height of first row and last row ..

i defined height 100% to body and html so the 100% table height work .. but i can't fix heights of first and last row ...

if i change doctype to html 4.01 works ok .. but in xhtml 1.1 transitional doesn't .. is there any solution ? ...page must be validated

thnx

I had a similar setup recently, except I used divs in xhtml strict1.1 and I had the middle div have a set percentage for the height (thus no dynamic filling up space), which would get a scrollbar in certain resolutions if there wasn't enough space for the middle div. Ofcourse it depends on the purpose of your page and your options whether you could do that.

If you were to use divs only, you can't define a div or two with fixed height and another one that would dynamically fill the rest of the space. That's only possibly with horizontal space using floats, but not for vertical space. The only way is to have all divs define a percentage that add up to 100% or some other percentage.

There is a way however, which is to do the math yourself. Unfortunately CSS doesn't support mathematical operations yet (isn't that CSS3 anyway?). But ofcourse you can do this with javascript and still have your page validate. It won't win a beauty contest, but it works for at least the three major browsers:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<title>vert. space test</title>
		<style type="text/css">
			html, body {
				height: 100%;
			}
		
			#section_top {
				height: 100px;
				background-color: green;
			}
		
			#section_middle {
				/* height: auto% - see javascript */
				background-color: blue;
			}
		
			#section_bottom {
				height: 50px;
				background-color: red;
			}
		</style>
	</head>
	
	<body>
		<div id="section_top">&nbsp;</div>
		<div id="section_middle">&nbsp;</div>
		<div id="section_bottom">&nbsp;</div>
		
		<script type="text/javascript">
			window.onload = function() {
				var section_middle = document.getElementById("section_middle");
				section_middle.style.height = 100 - (100 * 150 / document.body.clientHeight) + "%"; // or:
				// section_middle.style.height = (document.body.clientHeight - 150) + "px";
			}
		</script>
	</body>
</html>

The number 150 is the heights of the other sections added together. I wish there was an easy way to do this dynamically with javascript, but there are too many cross-browser issues regarding determining the size of elements and the screen (including the distinction between absolute screen and the screen of the page window).

mrsnrub007 · 2008-01-16 #8

Quote: Originally Posted by Codemonkey

That is, styles regarding size. You can safely define for example color styles, since they are inherited by child elements.

That's correct; inherited values applied to the tr element will be inherited by its children, but in that case it's still the rendered child manifesting the style while the tr itself remains invisible. Inherited styles include foreground colors but not background colors, and most text styles (font-family, font-weight, list-style, text-align, etc).

mrsnrub007 · 2008-01-16 #9

This should get you the same visual effect and doesn't require any math or javascript:

Code:

html, body { height: 100%; }
#page { height: 100%; background-color: blue; padding-bottom: 5em; }
#section_top {  height: 10em; background-color: green; }
#section_bottom { position: absolute; bottom: 0; height: 5em; background-color: red; }

This way you don't even need a container for the main body, the content can just live in its natural setting. The bottom section is positioned at the bottom while the bottom padding on #page ensures there's enough room for it (otherwise it'll overlap the content). Of course this assumes that #section_bottom has no positioned ancestor so it gets positioned in relation to the window instead of some other container. It's a classic solution to the "footer stick" problem, but there are others as well.

You should try to avoid giving any element a height set in any non-relative unit or a percentage because that height won't expand when text is resized. If you must give something a height, use ems so the container grows as the text grows, but even that will break down when text wraps to more lines than the box can hold. It all depends on how much text the element needs to contain.

Codemonkey · 2008-01-16 #10

That's an elegant solution true enough, thanks you for that (I got the intend, but I had trouble getting it to work right). But I've learned from experience that with the more 'customized' layouts a customer demands, you cannot do without specifying specific sizes. If you do need to set sizes, as you said, I agree you should try to use ems where possible.

In you rexample though, won't you get problems when using lower resolutions, meaning the main content won't get enough space and the footer will get in the way (not sticking to the bottom anymore either)? From a quick glance, you'd still need to define a height for the middlecontent, just to get the scrollbars in just such a case...

mrsnrub007 · 2008-01-16 #11

You're right, I rattled off that post off the top of my head and didn't think through the code or test it at all. So ignore it, I completely screwed up. But after a wee bit of fiddling I've come up with this:

markup

Code:

<div id="page">
  <div id="section_top">head</div>
  <div id="section_middle">body</div>
  <div id="section_bottom">foot</div>
</div>

CSS

Code:

html, body { margin: 0; padding: 0; height: 100%; }
#page { min-height: 100%; position: relative; }
#section_top { background: green; }
#section_middle { padding-bottom: 6em;  padding-bottom: 6em; }
#section_bottom { position: absolute; bottom: 0; width: 100%; height: 6em; background: red; }

IE6 doesn't support min-height, but it treats plain old height as min-height, so this rule needs to be sent only to IE6, either in a conditional comment or with the "* html" hack: #page { height: 100%; }

One obvious point to make is that #section_middle doesn't actually reach the bottom of the page, so it can't carry a background or the effect is ruined. So whatever background (color or image) you want #section_middle to have should instead be applied to the body element. But the footer does stick to the bottom of the window and is pushed down by the content when content is long.

The one drawback I see is that you can't add any padding to the left and right of #section_bottom because it'll be added to 100% and give you horizontal scrollbars, so you can either use percentage padding (like width: 96%; padding: 0 2%

or use margins on elements within the div to push them in from the sides.

Uros · 2008-01-18 #12

My problem ocures only in Internet Explorer ... i tryed to define heights in all TD .. TR .. if i define td#mid {height: 100%; } i get a scroll bar .... i can't in any way get this table to work

HTML Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
	<title>test</title>
	<style>
		html, body {height: 100%; padding: 0; margin: 0;}
		table#main {width: 100%; height: 100%;}
		td#head {height: 100px;}
		td#mid {}
		td#foot {height: 100px;}
	</style>
</head>

<body>

<table id="main" border="1">
	<tr>
		<td>&nbsp;</td>
		<td id="head">&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td id="mid">&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
	<tr>
		<td>&nbsp;</td>
		<td id="foot">&nbsp;</td>
		<td>&nbsp;</td>
	</tr>
</table>

</body>
</html>

Thread Tools
Show Printable Version Email this Page
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:


	Ultrashock Forums > Development > Client Side • XHTML - Fixed row in 100% height table (XTML)


		You are currently viewing our website as a guest which gives you limited access to forums, files and other resources. Click here to join now for free, and start interacting with our members, download files and much more! Click here if you are looking for our Flash files and other professional assets.

	Adam	2008-01-15 #2
	100% height by in HTML only works in < HTML 4.01 What are you trying to do and I'll see if i have a solution for you.

	Uros	2008-01-16 #3
	I allready have 100% height table in xhtml (100% defined in CSS) .. My problem is that i can't fix height of first and last row ..

	Adam	2008-01-16 #4
	sorry, misread you before. have you tried applying a class to the the rows. i.e. <tr class="firstRow"> and giving the row a height in css tr.firstRow {height:1.4em;}

	mrsnrub007	2008-01-16 #5
	Table rows (the tr element) aren't rendered, they only define where a set of table cells (th and td elements) begins and ends. Because the tr element has no screen presence, it's pretty much unstylable; you need to apply your styles to the row's children instead: Code: tr.first-row th, tr.first-row td { height: 10em; } tr.third-row th, tr.first-row td { height: 6em; }

	Codemonkey	2008-01-16 #6
	Quote: Originally Posted by mrsnrub007 Table rows (the tr element) aren't rendered, they only define where a set of table cells (th and td elements) begins and ends. Because the tr element has no screen presence, it's pretty much unstylable; you need to apply your styles to the row's children instead: Code: tr.first-row th, tr.first-row td { height: 10em; } tr.third-row th, tr.first-row td { height: 6em; } That is, styles regarding size. You can safely define for example color styles, since they are inherited by child elements.

	Codemonkey	2008-01-16 #7
	Quote: Originally Posted by Uros I have a problem .. i have a 100% height table with three rows ... i need fixed height of first row and last row .. i defined height 100% to body and html so the 100% table height work .. but i can't fix heights of first and last row ... if i change doctype to html 4.01 works ok .. but in xhtml 1.1 transitional doesn't .. is there any solution ? ...page must be validated thnx I had a similar setup recently, except I used divs in xhtml strict1.1 and I had the middle div have a set percentage for the height (thus no dynamic filling up space), which would get a scrollbar in certain resolutions if there wasn't enough space for the middle div. Ofcourse it depends on the purpose of your page and your options whether you could do that. If you were to use divs only, you can't define a div or two with fixed height and another one that would dynamically fill the rest of the space. That's only possibly with horizontal space using floats, but not for vertical space. The only way is to have all divs define a percentage that add up to 100% or some other percentage. There is a way however, which is to do the math yourself. Unfortunately CSS doesn't support mathematical operations yet (isn't that CSS3 anyway?). But ofcourse you can do this with javascript and still have your page validate. It won't win a beauty contest, but it works for at least the three major browsers: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>vert. space test</title> <style type="text/css"> html, body { height: 100%; } #section_top { height: 100px; background-color: green; } #section_middle { /* height: auto% - see javascript / background-color: blue; } #section_bottom { height: 50px; background-color: red; } </style> </head> <body> <div id="section_top"> </div> <div id="section_middle"> </div> <div id="section_bottom"> </div> <script type="text/javascript"> window.onload = function() { var section_middle = document.getElementById("section_middle"); section_middle.style.height = 100 - (100 150 / document.body.clientHeight) + "%"; // or: // section_middle.style.height = (document.body.clientHeight - 150) + "px"; } </script> </body> </html> The number 150 is the heights of the other sections added together. I wish there was an easy way to do this dynamically with javascript, but there are too many cross-browser issues regarding determining the size of elements and the screen (including the distinction between absolute screen and the screen of the page window).

	mrsnrub007	2008-01-16 #8
	Quote: Originally Posted by Codemonkey That is, styles regarding size. You can safely define for example color styles, since they are inherited by child elements. That's correct; inherited values applied to the tr element will be inherited by its children, but in that case it's still the rendered child manifesting the style while the tr itself remains invisible. Inherited styles include foreground colors but not background colors, and most text styles (font-family, font-weight, list-style, text-align, etc).

	mrsnrub007	2008-01-16 #9
	This should get you the same visual effect and doesn't require any math or javascript: Code: html, body { height: 100%; } #page { height: 100%; background-color: blue; padding-bottom: 5em; } #section_top { height: 10em; background-color: green; } #section_bottom { position: absolute; bottom: 0; height: 5em; background-color: red; } This way you don't even need a container for the main body, the content can just live in its natural setting. The bottom section is positioned at the bottom while the bottom padding on #page ensures there's enough room for it (otherwise it'll overlap the content). Of course this assumes that #section_bottom has no positioned ancestor so it gets positioned in relation to the window instead of some other container. It's a classic solution to the "footer stick" problem, but there are others as well. You should try to avoid giving any element a height set in any non-relative unit or a percentage because that height won't expand when text is resized. If you must give something a height, use ems so the container grows as the text grows, but even that will break down when text wraps to more lines than the box can hold. It all depends on how much text the element needs to contain.

	Codemonkey	2008-01-16 #10
	That's an elegant solution true enough, thanks you for that (I got the intend, but I had trouble getting it to work right). But I've learned from experience that with the more 'customized' layouts a customer demands, you cannot do without specifying specific sizes. If you do need to set sizes, as you said, I agree you should try to use ems where possible. In you rexample though, won't you get problems when using lower resolutions, meaning the main content won't get enough space and the footer will get in the way (not sticking to the bottom anymore either)? From a quick glance, you'd still need to define a height for the middlecontent, just to get the scrollbars in just such a case...

	mrsnrub007	2008-01-16 #11
	You're right, I rattled off that post off the top of my head and didn't think through the code or test it at all. So ignore it, I completely screwed up. But after a wee bit of fiddling I've come up with this: markup Code: <div id="page"> <div id="section_top">head</div> <div id="section_middle">body</div> <div id="section_bottom">foot</div> </div> CSS Code: html, body { margin: 0; padding: 0; height: 100%; } #page { min-height: 100%; position: relative; } #section_top { background: green; } #section_middle { padding-bottom: 6em; padding-bottom: 6em; } #section_bottom { position: absolute; bottom: 0; width: 100%; height: 6em; background: red; } IE6 doesn't support min-height, but it treats plain old height as min-height, so this rule needs to be sent only to IE6, either in a conditional comment or with the "* html" hack: #page { height: 100%; } One obvious point to make is that #section_middle doesn't actually reach the bottom of the page, so it can't carry a background or the effect is ruined. So whatever background (color or image) you want #section_middle to have should instead be applied to the body element. But the footer does stick to the bottom of the window and is pushed down by the content when content is long. The one drawback I see is that you can't add any padding to the left and right of #section_bottom because it'll be added to 100% and give you horizontal scrollbars, so you can either use percentage padding (like width: 96%; padding: 0 2% or use margins on elements within the div to push them in from the sides.