|
|
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:
table:
div nested in td and 100%+overflow auto
 |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡