设置多行的Table高度为100%，并在最后一行中加入iframe

　　早之前在项目中用到了 iframe 框架，并且是在一个三行的table中最后一行中加入 ifram，前两行里是用来功能的操作，前两行设置了高度，最后一行不想设置高度，让它width：100% ；但是就是不起作用。前面一直没有解决掉这个问题，就给设置了一个高度。后面想来想去，这个问题迟早都要解决，不然iframe的滚动条就会出现问题，屏幕分辨率不一样的时候就看不到水平滚动条。

　　今天，无意中发现了一个很好的方法，解决了table在IE中的100%问题。

　　IE下要用expression解决
　　height:expression(document.body.clientHeight-58 + "px" );
　　其中这个-58高度要根据上下高度来决定的，自己可以试着调整，要比前两行高度和大。

　　页面代码：

代码

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefSteps.aspx.cs" Inherits="Admin_DefSteps" %>
 2 
 3  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5  <html xmlns="http://www.w3.org/1999/xhtml" >
 6  <head runat="server">
 7     <title>定义过程</title>
 8  </head>
 9  <style type="text/css">
10 html,body 
11 {
12     margin:0; padding:0;
13     height:100%;width:100%;
14     border:none; font-size:12pt;
15     overflow:hidden; 
16 }
17 .tab_main{width:100%; height:100%; text-align:left;border:0; margin:0; padding:0;}
18 .tab_top 
19 {
20     background-color:#D7E5F7; height:25px; 
21     border-top:solid 3px #B0CEED; border-bottom:solid 2px #B0CEED; 
22     font-weight:bold; color:#3764A0;
23     text-align:center;
24 }
25 .tab_center{height:25px; border-bottom:solid 2px #C5D6FD}
26 .tab_bottom{height:100%;}
27 .autoHeight    
28 {   
29     height:expression(document.body.clientHeight-58 + "px" ); padding:0px; margin:0px;    
30 } 
31 </style>
32 <body>
33     <form id="form1" runat="server">
34         <table class="tab_main" cellpadding="0" cellspacing="0">
35             <tr>
36                 <td class="tab_top">
37                     第一行
38                 </td>
39             </tr>
40             <tr>
41                 <td class="tab_center" valign="middle">
42                     第二行
43                 </td>
44             </tr>
45             <tr>
46                 <td class="tab_bottom" id="tabframe" valign="top">
47                     <div class="autoHeight">
48                     <iframe id="content" name="content" src="admin.html"frameborder="0"  style="height:100%; width:100%;"></iframe>
49                     </div>
50                 </td>
51             </tr>
52         </table>        
53     </form>
54 </body>
55 </html>

如果大家还有其它好的方法，欢迎提出交流~~~

posted on 2010-05-14 17:17 ZEKELOVE 阅读(1546) 评论(2) 编辑收藏举报