跨浏览器下，关于Div高度自适应（一）

最新推荐文章于 2024-05-11 21:19:51 发布

aiaoji5171

最新推荐文章于 2024-05-11 21:19:51 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xwwanghai/archive/2011/09/26/2191807.html

版权

最近做个小项目，遇点用于展示内容的div区域高度无法自适应高度（非IE下），该出现的滚动条无法使用，查阅了一些资料终于解决，记录在此以作分享给有需要的同学。

实现原理比较简单，简要说明下：
1、div的高度100%问题在非IE下无效，非IE浏览器无法识别，进而展示滚动条；
2、非IE对于div只能有效识别具体的高度值，因此在页面窗口加载或修改时，通过js计算并给div赋出实际的值；
3、特别说明：onresize事件在不同浏览器下可能会被执行2次的情况代码未做处理（可自行完善方法避免）

代码如下：

View Code

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <title></title>    
 5     <script type="text/javascript" src="/Scripts/jquery-1.6.2.min.js"></script>
 6 </head>
 7 <body>
 8 <table cellspacing="0" cellpadding="0" style="width:100%;height:100%">
 9     <tr style="height:25px">
10         <td>
11            数据列表
12         </td>
13     </tr>
14     <tr style="height:25px">
15         <td>
16             <input id="btnAdd" value="新增" type="button" οnclick="oprAdd()" />
17         </td>
18     </tr>
19     <tr>
20         <td height="100%">
21             <!--数据列表展示div区域，内容超出时要出现滚动条-->
22             <div id="DyGrid1_table" style="width:100%;height:100%;overflow:scroll;">
23                 <table class="grid" cellspacing="0">    <!--此处为服务器控件，生成实际的数据列表table-->
24                    <tr class="headbg">
25                         <td scope="col" class="head" style="width:20px">&nbsp;</td><td scope="col" class="head" style="width:150px;">合同编号</td><td scope="col" class="head" style="width:150px">客户名称</td><td scope="col" class="head" style="width:70px">签订日期</td><td scope="col" class="head" style="width:70px">交货日期</td><td scope="col" class="head" style="width:100px">人民币总额(元)</td><td scope="col" class="head" style="width:100px">付款方式</td><td scope="col" class="head" style="width:80px">合同类型</td><td scope="col" class="head" style="width:60px">状态</td><td scope="col" class="headend">业务员</td>
26                     </tr>
27                     <tr>
28                         <td></td>
29                     </tr>
30                     <tr>
31                         <td></td>
32                     </tr>
33                     <tr>
34                         <td></td>
35                     </tr>
36 
37                     <!--此处省略 N... 行 -->
38 
39                 </table>
40             </div>
41         </td> 
42     </tr>
43     <tr style="height:25px">
44         <td>底部分页行</td>
45     </tr>
46 </table>
47 </body>
48     <script type="text/javascript">
49         function resizeContent() {
50             var curHeight;
51             if ($.browser.msie) {   //兼容不同浏览器
52                 curHeight=document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight:document.body.clientHeight;
53             } else {
54                 curHeight=self.innerHeight;
55             }
56             $("#DyGrid1_table").css("height", curHeight-75);
57         }
58         resizeContent();
59         window.onresize = resizeContent;
60     </script>
61 </html>

经验证在目前几大主流览器下都能正常使用。

转载于:https://www.cnblogs.com/xwwanghai/archive/2011/09/26/2191807.html

aiaoji5171

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨浏览器下，关于Div高度自适应（一）

最近做个小项目，遇点用于展示内容的div区域高度无法自适应高度（非IE下），该出现的滚动条无法使用，查阅了一些资料终于解决，记录在此以作分享给有需要的同学。实现原理比较简单，简要说明下：1、div的高度100%问题在非IE下无效，非IE浏览器无法识别，进而展示滚动条；2、非IE对于div只能有效识别具体的高度值，因此在页面窗口加载或修改时，通过js计算并给div赋出实际的值；3、特别...
复制链接

扫一扫