在WEB里如何设置iframe自适应


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来在WEB里如何设置iframe自适应,在WEB里设置iframe自适应的注意事项有哪些,下面就是实战案例,一起来看一下。

问题
在响应式布局中,我们应该小心对待iframe元素,iframe元素的width和height属性设置了其宽度和高度,但是当包含块的宽度或高度小于iframe的宽度或高度时,会出现iframe元素溢出的现象:

这样溢出的iframe会破坏页面的布局。我们可以采用一种方法让iframe元素也具有响应性,拭目以待。

解决方法
iframe元素本身并无法伸缩,除非通过js显示的设置其宽度。但是我们可通过一个iframe-container元素来包裹iframe,同时让iframe-container元素的宽度充满包含块的宽度,并且根据iframe的长宽比,设置iframe-container元素的padding-bottom百分比。

其实,这种方式的精髓就在于设置iframe-container元素的padding-bottom属性,设置该属性的目的在于变相的设置元素的高度。因为给padding-bottom设置百分比,是相对于父元素的width而言的,如果对height属性设置百分比,则相对于父元素的height,而父元素的height值我们通常使用默认的auto,因此会出现子元素height也为0.因此,我们只能给padding-bottom设置属性。这样,只需让iframe元素充满iframe-container即可。

阅读剩余部分

相关阅读 >>

html5web本地存储实例详细说明

web网页有静态网页和什么网页

iframe的子页面怎样操作父页屏蔽页面弹出层效果

web前端开发需要学习哪些技术

html自适应字号

web开发之转发和重定向区别

web标准的制定者是谁

做web响应式设计(不用媒体查询)实例

使用hbuilder打包webapp

iframe的跨域使用方法

更多相关阅读请进入《iframe》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...