IE6上的table布局有关问题-ASP.NET教程-爱易网页

IE6上的table布局有关问题

日期：2014-05-17　浏览次数：20423 次

IE6下的table布局问题
网页使用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>
   &

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

IE6上的table布局有关问题

相关资料更多>

推荐阅读更多>