100% height div & table in html

伊苏

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

最近访客更多访客>>

liuqu11

xphoenix

rubskin

shanmeimeia

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

css html

to implement 100% height container in html, I get 2 method to get it, with div, and with table.

first div

<html>
	<head>
		<title>div 100% height</title>
		<style>
			html, body {
				height: 100%;
				width: 100%;
				margin: 0;
				padding: 0;
			}
			#t {
				position: absolute;
				left: 1%;
				top: 1%;
				border: 1px solid #777;
				height: 98%;
				width: 98%;
			}
		</style>
	</head>
	<body>
		<div id="t">
			100% height of div
		</div>
	</body>
</html>

the div apply is priority and recommend if you don't need footer.
there is a issue: when div nested in td, it's height will be mark up when 100% height of td are not enoungh div's content.
in IE6, chrmoe, as per render by browser as quirk, the overflow auto work,
but in FF, FF browser stand to w3c stand, so it's not work, to solve this issue,
consider use position fixed.

second table

<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;
			}
			#t thead td {
				height: 100px;
			}
			#t tfoot td {
				height: 50px;
			}
		</style>
	</head>
	<body>
		<table id="t">
			<thead>
				<tr>
					<td class="theader">header</td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td class="tfooter">footer</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td class="tbody">b</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

pls note, the overflow auto work in FF when div 100% height also.
because the html, body have a exactly height with px not %.

see below code

<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;
			}
			#t thead td {
				height: 100px;
			}
			#t tfoot td {
				height: 50px;
			}
		</style>
		<script>
			window.onload=function(){
				var len=100;
				var txt="";
				for(var i=1;i<len;i++){
					txt=txt.concat(i+"<br />");
				}
				document.getElementById("d").innerHTML=txt;
			}
		</script>
	</head>
	<body>
		<table id="t">
			<thead>
				<tr>
					<td class="theader">header</td>
				</tr>
			</thead>
			<tfoot>
				<tr>
					<td class="tfooter">footer</td>
				</tr>
			</tfoot>
			<tbody>
				<tr>
					<td class="tbody">
						b
						<div id="d" style="height: 100%; border: 1px solid #ccc; overflow: auto">
							
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

the result as below:
div: