Question

所以我需要在一个页面上创建一个带有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）。

非常感谢任何帮助......

Answer 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;
}

我需要在一个页面上有2个iframe，一个在另一个上面

1 个答案: