所以我需要在一页上创建一个带有 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)。
如有任何帮助,我们将不胜感激...
最佳答案
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;
}
关于css - 我需要在一页上有 2 个 iframe,一个在另一个顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23165243/