问题

需求是这样的,iframe在一个div中,并且iframe高度与div一样,所以设置了iframe高度是100%,结果div出现了滚动条,在排除了padding、margin的因素外,还是有滚动条。按理说,只有iframe有滚动条,父div不应该有滚动条。

<div>
<iframe frameborder="no" src="https://www.oschina.net/">
</iframe>
</div>
html,
body {
height: 100%;
padding:;
margin:;
} div {
height: 100%;
/*第一种解决方案*/
/*font-size:0;*/ } iframe {
width: 100%;
height: 100%;
/*第二种解决方案*/
/*vertical-aglin:top;*/
/*第三种解决方案*/
/*display:block;*/
}

效果图 

分析

一般搜索后,找到了原因;简单来说,iframe=inline frame它是一个内联元素,默认是跟baseline对齐的,iframe后边有个看不见、摸不着的行内空白节点, 空白节点占据着高度,iframe与空白节点的基线对齐,导致了div被撑开,从而出现滚动条。查看空白节点捣鬼 
找到原因了,解决方案也就简单了。 
第一种,设置iframe的vertical-align:top 
第二种,设置父div的font-size:0,从而影响空白节点的line-height是0,从而不占据高度。 
第三种,改变iframe的内联元素性质,改为块级元素,display:block

后续问题

上述解释有点笼统,关于line-height和vertical-align(top、baseline)的详细功能,还得继续研究。等研究透彻,再重新解释这个问题。

(转)iframe 高度100%时,出现垂直滚动条的更多相关文章

  1. iframe高度100%,自适应高度

    声明:有更好的方法在下一篇内容中 100% http://www.360doc.com/content/11/1102/15/55892_161105115.shtml iframe自适应高度 转自: ...

  2. 解决boostrap-table有水平和垂直滚动条时,滚动条滑到最右边表格标题和内容单元格无法对齐的问题

    问题:boostrap-table有水平和垂直滚动条时,滚动条不高的时候(滚动高度比较大的时候没有问题),滚动条滑到最右边表格标题和内容单元格无法对齐的问题 问题原因:bootstrap-table源 ...

  3. 关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条

    关于iframe的滚动条,如何去掉水平滚动条或垂直滚动条 关于<iframe>可以通过设置属性scrolling="no" 去掉iframe的两个滚动条. 如何只去掉水 ...

  4. 如何让iframe框架和主页面共用一个滚动条(也称为:iframe高度自适应问题)

    最近在前端页面遇到了一个问题,我在一个页面中利用iframe框架引入了一个页面进来,但是这个页面的高度是不叫高的,高出电脑屏幕很多, 所以就引发了iframe框架一个滚动条,然后主页面一个滚动条,这样 ...

  5. iframe高度自适应内容

    JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看不出来滚动条和嵌套痕迹.对于用户体验和网站美观起着重要作用. 如果内容是固定的,那么我们可以通过CSS来给它直接定义一个高 ...

  6. (转)iFrame高度自适应

    第一种方法:代码简单,兼容性还可以,大家可以先测试下: function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  7. Iframe高度自适应(兼容IEFirefox、同域跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  8. Iframe高度自适应(兼容IE/Firefox、同域/跨域)

    在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...

  9. iframe高度自适应的6个方法

    原文链接:http://caibaojian.com/iframe-adjust-content-height.html JS自适应高度,其实就是设置iframe的高度,使其等于内嵌网页的高度,从而看 ...

随机推荐

  1. mysql 查询正在执行的sql

    select * from information_schema.`PROCESSLIST` where info is not null; 或者 -- use information_schema; ...

  2. html input 上capture 参数在 安卓 苹果上的异同

    安卓上 <input type="file" accept="image/*" capture="camera"> //只调用相 ...

  3. 在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr。

    在jquery中应该使用prop方法来获取和设置checked属性,不应该使用attr. $("#checkAll").prop("checked", true ...

  4. windows10 自动配置切换IP

    办公室与家里的ip网段不一样.每次都要来回修改本地无线WLAN IP段.写了个脚本bat,自动配置WLAN IP,方便切换. 建立 auto-set-ip.bat,保存格式需为ANSI,否则中文会乱码 ...

  5. HTML5表格(table)篇

    初学HTML接触table少不了,但是实际应用的地方也有. 简单说明HTML <table> 标签 定义和用法 <table> 标签定义 HTML 表格. 简单的 HTML 表 ...

  6. 依赖背包优化——ural1018,金明的预算方案

    经典题了,网上博客一大堆O(nCC)的做法,其实是可以将复杂度降到O(nC)的 参考依赖背包优化(泛化物品的并) 根据背包九讲,求两个泛化物品的和复杂度是O(CC)的,所以依赖背包暴力求解的复杂度是O ...

  7. Feign连接超时 Read timed out

    在远程调用的过程中由于连接超时,导致无法成功请求数据,下面是报错 项目中用的是spring-cloud-starter-openfeign 2.2.0版本 找到对应的文档,开始查阅资料 文档首页就找到 ...

  8. Dll注入技术之APC注入

    APC注入的原理是利用当线程被唤醒时APC中的注册函数会被执行的机制,并以此去执行我们的DLL加载代码,进而完成DLL注入的目的,其具体流程如下:     1)当EXE里某个线程执行到SleepEx( ...

  9. Linux下rsync的安装及简单使用

    2018-09-25 15:39:04 一.RSYNC安装环境: centos6.5 iptables关闭和selinux为disabled 源码安装:到rsync官网下载rsync源码安装包,上传到 ...

  10. mssql查询表在哪个数据库中

    mssql查询表在哪个数据库中 EXEC sp_MSforeachdb @command1='IF object_id(''?'' + ''..表名'') IS NOT NULL PRINT ''?' ...