easyui tab 加载iframe 高度问题(解决iframe右侧总出两个滚条方法)

最新推荐文章于 2025-11-29 21:15:37 发布

原创最新推荐文章于 2025-11-29 21:15:37 发布 · 5.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #easyui #浏览器 #easyui tab #iframe右侧总出两个滚条方法

前端同时被 2 个专栏收录

1 篇文章

订阅专栏

EasyUi

1 篇文章

订阅专栏

本文介绍了一种常见的网页布局问题——iframe元素导致的双滚动条现象，并提供了两种解决方案：一是通过CSS设置overflow属性隐藏多余滚动条；二是使用正确的DOCTYPE声明来避免此类问题。

问题描述：

浏览器兼容性导致右侧出现双滚动条。

html主要代码：

<div data-options="region:'center',border:false" style="background:#eee;">
    	<div id="tabsBar" class="easyui-tabs" fit="true">
    	</div>
    </div>

js主要代码：

function addTabPage(tabName,tabUrl){
			if($("#tabsBar").tabs("exists",tabName)){
				$("#tabsBar").tabs("select",tabName);
			}else{
				$("#tabsBar").tabs("add",{
				    title:tabName, 
				    content:'<iframe scrolling="auto" frameborder="0"  src="' + tabUrl
						+ '" style="width:100%;height:100%;"></iframe>',
				    closable:true,
				    tools:[{
				        iconCls:"icon-mini-refresh",    
				        handler:function(){    
				        	$('#tabsBar').tabs('getSelected').find("iframe")[0]
				        		.contentWindow.location.reload(true); 
				        }
				    }]    
				});
			}
		}

一、亲自验证方法（推荐）：

解决iframe右侧总出两个滚条方法

#tabsBar .tabs-panels>.panel>.panel-body {
overflow: hidden;
}

二、源自网络解决方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">

有其他更好的解决方法欢迎留言。