IE6上的table布局有关问题
日期：2014-05-17 浏览次数：20385 次
IE6下的table布局问题
网页使用Table布局，共三行，要求顶部、底部两行高度固定，中间自适应。
文档类型为：<!DOCTYPE html>。
问题：在IE6下，顶、底两行的高度无法固定，会自动随着浏览器的大小变化而变化。但是，在其它浏览器里面效果达到预期。
麻烦高手帮忙看看，谢谢。
------解决方案--------------------
table排版有点蛋疼
用javascript控制下行不
在ie6+ chremo ff测试通过
------解决方案--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
html{height:100%;}
body{margin:0px;padding:0px;min-height:100%;height:100%;}
div{margin:0px;padding:0px;}
#tb {height:100%;}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#dedede" id="tb">
<tr>
<td bgcolor="#000000" height="50"> </td>
</tr>
<tr>
<td valign="top">
<script type="text/javascript">
var content_h=document.body.clientHeight-100;
document.write("<div id='content' style='height:"+content_h+"px;background:#f8f8f8;overflow-y:auto; overflow-x:hidden'>");</script>
这里是内容开始部分！这里是自动拉高填满！<br />
1<br />2<br />3<br />4<br />5<br />1<br />2<br />3<br />4<br />5<br />
1<br />2<br />3<br />4<br />5<br />1<br />2<br />3<br />4<br />5<br />
<script type="text/javascript">document.write("</div>");</script>
<script type="text/javascript">
var Append_h=document.body.clientHeight-content_h-100;
if(Append_h!=0){document.write("<div style='height:"+Append_h+"px;'></div>");}</script>
</td>
</tr>
<tr>
&
网页使用Table布局，共三行，要求顶部、底部两行高度固定，中间自适应。
文档类型为：<!DOCTYPE html>。
问题：在IE6下，顶、底两行的高度无法固定，会自动随着浏览器的大小变化而变化。但是，在其它浏览器里面效果达到预期。
麻烦高手帮忙看看，谢谢。
------解决方案--------------------
table排版有点蛋疼
用javascript控制下行不
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<style type="text/css">
*{margin:0 auto;padding:0px;}
#top,#bottom{width:100%;height:100px;background:#f00;}
#middle{width:100%;height:100px;background:#0f0}
</style>
<script type="text/javascript">
function load()
{
//计算得到出上下两部分的高度
var auto_height=document.documentElement.clientHeight-200;
document.getElementById("middle").style.height=auto_height+"px";
//alert(auto_height);
}
</script>
</head>
<body onload="load();">
<table style="width:100%;border-collapse:collapse;">
<tr id="top">
<td>top</td>
</tr>
<tr id="middle">
<td>middle</td>
</tr>
<tr id="bottom">
<td>bottom</td>
</tr>
</table>
</body>
</html>
在ie6+ chremo ff测试通过
------解决方案--------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
html{height:100%;}
body{margin:0px;padding:0px;min-height:100%;height:100%;}
div{margin:0px;padding:0px;}
#tb {height:100%;}
</style>
</head>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#dedede" id="tb">
<tr>
<td bgcolor="#000000" height="50"> </td>
</tr>
<tr>
<td valign="top">
<script type="text/javascript">
var content_h=document.body.clientHeight-100;
document.write("<div id='content' style='height:"+content_h+"px;background:#f8f8f8;overflow-y:auto; overflow-x:hidden'>");</script>
这里是内容开始部分！这里是自动拉高填满！<br />
1<br />2<br />3<br />4<br />5<br />1<br />2<br />3<br />4<br />5<br />
1<br />2<br />3<br />4<br />5<br />1<br />2<br />3<br />4<br />5<br />
<script type="text/javascript">document.write("</div>");</script>
<script type="text/javascript">
var Append_h=document.body.clientHeight-content_h-100;
if(Append_h!=0){document.write("<div style='height:"+Append_h+"px;'></div>");}</script>
</td>
</tr>
<tr>
&
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
