Html iframe导致的双滚动条

通过下面的代码，我得到了一个双滚动条——一个用于iframe本身，另一个用于web页面。我希望建议/解决方案只有一个滚动条，它将与整个页面相关联，而不是iframe。我最初的想法是使用javascript确定浏览器的大小，然后将其用作iframe标记的高度

HTML:

我尝试过的事情：

在html iframe标记中，我取出了

height=1000

。这将iframe缩小到页面的一小部分。我还用

height=100%

替换了html-iframe标记中的

height=1000

，但仍然存在相同的问题

如上所述，我使用javascript来确定浏览器的高度，并使用它来确定iframe标记中的height属性。这确实有效，但它只为iframe提供了一个滚动条，而不是整个页面

请注意，我已经了解了这一点，并将其实现到我的代码中。

（请注意，此解决方案假定您的iframe不需要滚动，而不是您希望它滚动，而是隐藏滚动条。这将更加复杂。）

对HTML中的

标记要做的第一件事是去掉

高度

和

宽度

属性，然后在CSS中定义它们。然后，要消除iframe中的滚动，请设置

scrolling=“no”

。这将隐藏滚动条

<iframe src="webpage.com" frameborder="0" scrolling="no">

最后，为了确保所有这些都能正常工作，请取消

.iframe content

上的绝对定位。没必要

html，正文{
身高：100%；
}
身体{
保证金：0；
背景：#222；
字体系列：“无衬线工作”，无衬线；
字体大小：400；
}
标题{
背景：#ffffff；
位置：相对位置；
高度：100px；
}
.集装箱{
宽度：80%；
保证金：0自动；
}
/*.iframe内容{
位置：绝对位置；
顶部：100px；
左：0；
右：0；
底部：0；
} */
.iframe内容iframe{
显示：块；
宽度：100%；
高度：70vh；
边界：无；
}
#其他东西{
高度：300px；
背景颜色：耐火砖；
}

（请注意，此解决方案假定您的iframe不需要滚动，而不是您希望它滚动，而是隐藏滚动条。这将更加复杂。）

对HTML中的

标记要做的第一件事是去掉

高度

和

宽度

属性，然后在CSS中定义它们。然后，要消除iframe中的滚动，请设置

scrolling=“no”

。这将隐藏滚动条

<iframe src="webpage.com" frameborder="0" scrolling="no">

最后，为了确保所有这些都能正常工作，请取消

.iframe content

上的绝对定位。没必要

html，正文{
身高：100%；
}
身体{
保证金：0；
背景：#222；
字体系列：“无衬线工作”，无衬线；
字体大小：400；
}
标题{
背景：#ffffff；
位置：相对位置；
高度：100px；
}
.集装箱{
宽度：80%；
保证金：0自动；
}
/*.iframe内容{
位置：绝对位置；
顶部：100px；
左：0；
右：0；
底部：0；
} */
.iframe内容iframe{
显示：块；
宽度：100%；
高度：70vh；
边界：无；
}
#其他东西{
高度：300px；
背景颜色：耐火砖；
}

<iframe src="webpage.com" frameborder="0" scrolling="no">

.iframe-content iframe {
  height: 70vh; /* or whatever */
}