100% height div & table in 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:
http://dl.iteye.com/upload/attachment/544962/376a24b2-08c4-3804-90b3-917e8efafcf9.jpg
table:
http://dl.iteye.com/upload/attachment/544964/33cff408-52bb-3983-abd6-78748e2d2ec8.jpg
div nested in td and 100%+overflow auto
http://dl.iteye.com/upload/attachment/552867/5bb6124e-af27-38d2-8ced-5b3ff9c0ed47.png
页:
[1]