设置多行的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 >

 

 

 

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