IE6下的table布局问题

sky 2013-03-05 08:43:03

网页使用Table布局，共三行，要求顶部、底部两行高度固定，中间自适应。
文档类型为：<!DOCTYPE html>。

问题：在IE6下，顶、底两行的高度无法固定，会自动随着浏览器的大小变化而变化。但是，在其它浏览器里面效果达到预期。

麻烦高手帮忙看看，谢谢。

...全文

298 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

demo1test 2013-03-07

打赏
举报

demo1test 2013-03-06

打赏
举报

我发的这个不全,没有窗口变化时候重新操作. 不过估计没有js 很难..

demo1test 2013-03-06

打赏
举报

<!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> <td bgcolor="#333333" height="50"> </td> </tr> </table> </body> </html>

sky 2013-03-06

打赏
举报

客户那边有小显示器，有24寸的大显示器，分辨率差别很大的。如果使用百分比的话，也会非常明显的。不知道有没有纯粹修改css，或者嵌套table/div这样的解决办法？

sky 2013-03-06

打赏
举报

问题还没有解决啊，请高手支招啊。。。。。。。

sky 2013-03-05

打赏
举报

如果使用DIV布局的话，浏览器的兼容性更麻烦一些，特别是针对IE6。企业内部的BS系统，感觉使用table布局更稳妥一些。单个页面的数据量毕竟也不大的，与div相比，基本上不存在明显的效率问题。

yyl8781697 2013-03-05

打赏
举报

感觉使用table做这样的实现会比较烦 LZ能不能改用div来排版呢

sky 2013-03-05

打赏
举报

回 wangyizhi58: 如果使用我提到的文档类型，在IE6下，使用你的代码，中间行会扩充到整个屏幕，从而在一屏之内，看不到顶行和底行。某大集团项目，IE6是客户指定必须满足的浏览器，我也没有办法。

wangyizhi58 2013-03-05

打赏
举报

<table> <tr> <td height="20px" width="100%"></td> </tr> <tr> <td height="100%" width="100%"></td> </tr> <tr> <td height="20px" width = "100%"></td> </tr> </table> 你可以试试做下，我记得是这样，我以前做过。。。尽量用火狐浏览器，然后用firebug改变属性值调试下

sky 2013-03-05

打赏
举报

而且如果是用JS来控制的话，还有一个弊端，就是在浏览器大小改变时，还需要再计算一次中间行的高度，否则就会造成中间行的高度无法自适应，从而出现垂直滚动条。

sky 2013-03-05

打赏
举报

如果是用JS控制的话，我前面也试过了。确实可以达到最终效果，但是在显示的时候，会有明显的界面抖动。就是能感觉出来，这个高度先是比较大的，然后被JS缩小了，从而产生抖动。不知道是否能从css上解决，或者其它更好的办法？

yyl8781697 2013-03-05

打赏
举报

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测试通过