内联框架高度iframe自适应问题

这两天这项目遇到一个难题。网页左边是菜单栏,右边是内联框架。根据菜单栏的点击改变右边内联框架的链接页面,那么问题来了,不同的页面高度不一样。 

 

一直在网上找各种解决方法,但都不能完美解决我的问题。

纠结了2天。结果在某天洗澡的时候突然醒悟。为什么我要执着于内联框架的高度自适应?我可以反其道而行之。让内联框架的滚动条代替主页面的滚动条。

 

一直以来大家的做法都是让内联框架的滚动条消失。防止出现既有 主页面滚动条、又有内联框架滚动条。但这样就需要内联框架高度自适应,才能使嵌套页面完全显示出来。然而内联框架高度自适应就是一个大麻烦。

 

如果反着来做,只需要简单代码。

 

首先让主页面的 滚动条消失 

style="overflow-y: hidden"
其次让内联框架的滚动条自动化  scrolling = "auto"
内联框架的高度  height = "100%<span style="font-family: Arial, Helvetica, sans-serif;">"</span>

 

 

<body style="overflow-y: hidden">
  <nav>........</nav>
  <iframe name="iframe" height="100%" src="home.html" frameborder="0" scrolling="auto">
			
  </iframe>
</body>


这样子就能简单的实现所谓的内联框架高度自适应了。

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值