iframe滚动条不显示怎么办？问题排查与解决！

最近搞个页面，里面套个 iframe，结果这滚动条把我给折腾的够呛，今天就来跟大家分享一下我的踩坑经历。

我寻思这不挺简单的嘛不就是一个 iframe 嘛结果页面一套进去，发现这滚动条时有时无，显示还不太正常，给我整懵。

第一次尝试

我先去网上搜搜，有人说给 iframe 加上 scrolling="yes" 属性就行，我试试：

• 加上 scrolling="yes"： 结果，这滚动条是出来，但是不管内容多少，它都在那杵着，丑死。

第二次尝试

然后，我又看到有人说，可能是跟什么 easyui、ACE 框架有关系，说是要重新计算 iframe 的宽高，重新渲染。我这项目没用这些框架，不过我也试着在页面加载完之后，用 JavaScript 动态设置一下 iframe 的高度，像这样：

* = function() {
var iframe = *('myIframe');
* = *.* + 'px';

结果还是不行，滚动条该咋样还是咋样，一点面子都不给。

第三次尝试

接着我又看到有人说跟浏览器渲染有关系，特别是 Chrome，要强制它渲染一下。我就想，要不我换个思路，从高度下手试试？

我就把iframe高度设成固定的。发现滚动条出来！但是，我这内容是动态的，高度不固定，这固定高度肯定不行。

我是这么解决的

折腾一大圈，发现，原来是我放 iframe 的那个容器，它的高度没设置我给那个容器加个样式：

.container {
height: 100%; / 或者你需要的其他高度 /

overflow: auto; / 重点是这个 /

然后，iframe 就乖乖地显示滚动条，内容多就自动出现，内容少就自动隐藏，完美！

所以说，这问题有时候真不能只盯着 iframe 本身，还得看看它周围的环境。这回的经历也让我明白，遇到问题得多方面考虑，不能一根筋。希望我的分享能帮到大家，少走弯路！