bug about td height in FF6, design full height, fixed header, footer, rest tbody

伊苏

浏览: 111494 次
性别:
来自: 深圳

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css html

there is a table frame about header, footer and body, I take it through table,
I indicate height of head & footer with class theader(100px) & tfooter(50px),
and keep tbody height empty to program auto calc the remain height.
last, I add a div as container and provider scroll when content out of height.

I get the result success with IE 6, chrome 12, safari 5.0.3,
but failure in FF 6.0

<html>
	<head>
		<title>table 100% height</title>
		<style>
			html, body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			#t {
				table-layout: fixed;
				border-collapse: collapse;
				height: 100%;
				width: 100%;
			}
			#t td {
				border: 1px solid #777;
			}
			.theader {
				height: 100px;
				text-align: center;
			}
			.tbody {
			}
			.tfooter {
				height: 50px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table id="t">
				<tr>
					<td class="theader">
						<div style="border: 0px solid #666; height: 100%; overflow: auto;">
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						</div>
					</td>
				</tr>
				<tr>
					<td class="tbody">
						<div style="height: 100%; overflow: auto;">
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
							abc<br />
						</div>
					</td>
				</tr>
				<tr>
					<td class="tfooter">
						<div style="height: 100%; overflow: auto">
							footer<br />
							footer<br />
							footer<br />
							footer<br />
							footer<br />
							footer<br />
						</div>
					</td>
				</tr>
		</table>
	</body>
</html>

result IE 6

result Chrmoe 12

result Safari 5.0.3

result FF6

look at the result of FF6, the height of td of tbody, can't keep it's original height(the remain height after header & footer), it's auto markup the height to fit td's content. and add scroll to body
it's not what I want. to fix this issue, I try to special a value to td height.
it work, but it's not a good method. because I can't know client browser availHeight. and I can't calc the remain height every time.
it's occur in FF6.0 only, it's work correctly in IE6, chrome12, safari.

2011-09-11
new understand:
as standard model does not support 100% height div nested in td in fact,
so it's render by quirk model, it's mean: it's decide by browser, so, IE and chrome consider this issue and compatible it. but maybe FF stand to w3c stand,
so does not support this issue.

and FF prepare an other solution to solve it: position fixed, a property indicate element locale by window;

<html>
	<head>
		<title>div width fix, work in ie6, chrome, but without FF</title>
		<style>
			table {
				table-layout: fixed;
				height: 100%;
				width: 100%;
			}
			table td {
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td height="50">
					<div style="overflow: auto; width: 100%; height: 100%">
						to solve the issue:<br />
						"div width fix, work in ie6, chrome, but without FF<br />
						div bottom will be broken when div height not enought for it's content"<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
						header<br />
					</div>
				</td>
			</tr>
			<tr>
				<td>
<!--				the below '' to show td border	-->
					&nbsp;
					<div style="border: 1px solid #777; position: fixed; top: 75px; right: 15px; bottom: 75px; left: 15px; overflow: auto">
						<div style="border: 1px solid #ccc; width: 1000px;">
							abc
						</div>
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
						abc<br />
					</div>
				</td>
			</tr>
			<tr>
				<td height="50">
					<div style="overflow: auto; height: 100%">
						footer<br />
						footer<br />
						footer<br />
						footer<br />
						footer<br />
						footer<br />
						footer<br />
						footer<br />
					</div>
				</td>
			</tr>
		</table>
		
	</body>
</html>

it's work in FF, chrome, Mathon, except IE6
because IE6 do not support fixed in position

result as below:

----------------------------------------------------------------------
summary:
div 100% height nested in td

IE6 support
chrome support
FF not support

position fixed (css2)
IE6 not support
chrome support
FF support