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

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
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
 
行内元素带来空白节点，也带来inline-block 空白节点问题。
 上述解释有点笼统，关于line-height和vertical-align（top、baseline）的详细功能，还得继续研究。
 
关注公众号
 
欢迎关注个人公众号
 
 
http://stackoverflow.com/questions/9129182/iframe-100-height-causes-vertical-scrollbar
 http://www.w3school.com.cn/cssref/pr_dim_line-height.asp
 http://www.w3school.com.cn/cssref/pr_pos_vertical-align.asp
 http://www.cnblogs.com/dolphinX/p/3236686.html
                    问题需求是这样的，iframe在一个div中，并且iframe高度与div一样，所以设置了iframe高度是100%，结果div出现了滚动条，在排除了padding、margin的因素外，还是有滚动条。按理说，只有iframe有滚动条，父div不应该有滚动条。在线demo  
				
iframe高度自适应及隐藏滚动条的实例详解
在工作中，我们可能会遇到自己公司和其他的公司达成合作关系，从而共同开发某个项目。而这时候，我们可能就需要在自己的网站上嵌入别人做好的页面。而这种情况下，我们一般都会选择去使用iframe达到我们的目的。但是iframe用起来，真的是让人头痛，高度无法控制，难看的滚动条等等，下面我分享一下自己在处理iframe时的一些心得。
高度自适应
<iframe src=http://huichang.qunar.com/huiQunar id=myiframe frameborder=no scrolling=yes style= over
				
问题描述： 
iframe设置了高度（例如500px）。倘若iframe的内容足够长超出了iframe设定的高度时，在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。 
问题重现：
index.html :
<style>　　
#iframe{height:500px;}
</style>
<div id=content>
  <iframe frameborder=0 src=iframe.html id=iframe></iframe>
				
在开发中经常遇到去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条，大家基于js是怎么实现的呢？下面通过本文给大家介绍下JavaScript中关于iframe滚动条的去除和保留的实现方法。一起看看吧！
iframe嵌入页面后，我们有时需要调整滚动条，例如，去掉全部的滚动条，去掉右边的滚动条且保留底下的滚动条，去掉底下的滚动条且保留右边的滚动条。那么我们应该怎么做呢？
   一：去掉全部的滚动条
         第一个方法：   iframe 有一个scrolling属性，它有 auto , yes , no 这三个值。
.parent设定了高度，设置iframe height：100%,通过浏览器观察发现，外层div与iframe高度相同，为什么出现滚动条，发现没有padding/margin的影响
<div class="parent">
  <iframe frameborder="no" style="width:100%;height:100%;" src="https://w...
iframe可以在原有的页面中嵌入一个新的页面，在所嵌入的新的页面中会出现相关的滚动条。
二、问题解决方案
直接控制iframe框架，使其不能出现滚动条。具体相关的代码如下所示：
<iframe :src="srcUrl" frameborder="0" scrolling="no"></iframe>
以上相关的关键代码为：
frameborder="0" scrolling="no"
作者：木有窝的鸟~小通
撰写时间：2019年7月17日
见过滚动条的小窗口吗，出现滚动条可以根据屏幕的大小来设置。一般iframe标签可以用于页面嵌套。平时写的小窗口也可以用iframe标签来写。那么在页面嵌套中呢，它可以设置宽度，而设置比较小的宽度的时候页面超出部分会出现滚动条。正因为如此，其实运用也比较广泛。
1、	为了节省视...
```javascript
var iframe = document.getElementById('my_iframe');
window.addEventListener('resize', function () {
    var height = window.innerHeight;
    iframe.style.height = height + 'px';
其中，my_iframe为iframe的id属性。在窗口大小改变时，获取浏览器窗口高度并将其赋值给iframe的高度属性，使其与浏览器高度保持一致。