ie ff 之resize

更新FF后,发现之前项目里的样式有比较大的问题,其实也算不上是更新后的问题,之前也存在只是现在更为明显些。后想想算了,找时间重构吧。

问题是这样,IE和FF里使用锁头的TABLE,代码不能很好的统一,CSS和JS都这样。后来网上找了资料,对问题进行了改进。

使用css固定表头,并结合JS让表格自适应高度


简单的表格,含thead和tbody
<div class="wzjGridTable">
<table cellpadding="0" cellspacing="0" border="0" id="tabClient">
<thead class="gridHeader">
<tr>
<td>标题</td>
</tr>
</thead>
<tbody class="gridContent">
<tr>
<td>内容</td>
</tr>
</tbody>
</table>
</div>



/*CSS*/
div.wzjGridTable{
position:absolute;
width:100%;
height:100%;
overflow:hidden;
_overflow-y:auto;
}
div.wzjGridTable table{
width:100%;
overflow:auto;
background:#FFFFFF;
}
div.wzjGridTable thead.gridHeader tr{
position: relative;
TOP: expression(this.offsetParent.scrollTop-1);
}



//js
if(navigator.appName.indexOf("Microsoft")!=-1){
setTableHeight_IE()
(window).bind("resize",function(){
setTableHeight_IE()
});
}else{
setTableHeight_FF()
window.onresize = setTableHeight_FF
}

function setTableHeight_FF(){
var titleHead=getHeight($(".toolbarDiv").css("height"))
var tool=getHeight($(".winTitle").css("height"))
var tabHead=getHeight($(".gridHeader").css("height"))
var finalH=document.body.clientHeight-titleHead-tool-tabHead;
$("#tabClient").css("height",finalH)
}

function setTableHeight_IE(){
var tabHead=getHeight($(".gridHeader tr td").css("height"))
var finalH=document.body.clientHeight-tabHead-tabHead;
$("div.wzjGridTable").css("height",finalH)
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值