我需要在一个页面上有 2 个 iframe，一个在另一个顶部答案

【问题标题】：i need to have 2 iframes on one page, one top of the other我需要在一个页面上有 2 个 iframe，一个在另一个顶部
【发布时间】：2014-04-19 02:53:21
【问题描述】：

所以我需要在一个页面上创建一个包含 2 个 iframe 的 html 页面，一个在另一个页面的顶部......顶部的页面将占据大部分页面，底部的页面将大约 80px 高......查看 JSFiddle下面。

我的代码似乎可以工作，但我注意到当我滚动某些页面时，滚动会跳动一点……它并不总是流畅的滚动体验……所以我的问题是……

有没有更好的方法来实现我想要做的事情？还是这是最好的方法？

html

<div id="frame2">
   <iframe name="frame2" src="" style="height: 80px; width: 100%; border: none;"></iframe>
</div><!-- close div#frame2 -->

<div id="frame1">
   <iframe name="frame1" src="http://www.apple.com/" style="height: 100%; width: 100%; border: none;"></iframe>
</div><!-- close div#frame1 -->

css

#frame1 {
   background-color: #0099ff;
   position: absolute;
   top: 0px;
   left: 0px;
   bottom: 80px;
   right: 0px;
}

#frame2 {
   background-color: #000000;
   position: absolute;
   top: 0px;
   left: 0px;
   bottom: 0px;
   right: 0px;
}

这也是代码的 jsfiddle (http://jsfiddle.net/jstormthakid/TMSwq)。

任何帮助将不胜感激...

【问题讨论】：

“滚动跳转的某些页面”它在 chrome 中对我来说很好......

标签： css html iframe frame

【解决方案1】：

DEMO HERE

html,body {
    height:100%;
}
.h_iframe1 iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%; 
    height:calc(100% - 120px);
}
.h_iframe2 iframe {
    position:absolute;
    bottom:0;
    right:0;
    width:100%; 
    height:120px;
}

我希望在第一个 iframe demo here 中没有滚动条可见

.h_iframe1 iframe {
    position:absolute;
    top:0;
    width:100%; 
    height:calc(100% - 120px);
    right: -30px;   
    padding-right: 15px;
    overflow-y: scroll;
}

【讨论】：