HTML iframe - 双滚动条 [英] HTML iframe - Double Scrolling Bars

问题描述

我设置了如下所示的iframe

 < iframe src =http://www.bbc.com/ frameborder =0width =100％>< / iframe> 
  

CSS

  iframe {overflow：hidden; 
 min-height：600px} 
  

出现2个水平滚动条，1个位于iframe

我想摆脱iframe的栏，我尝试

<$> p $ p> < iframe src =yahoo.comscrolling =noframeborder =0width =100％>< / iframe>


然后，iframe的滚动条消失了，问题是我看不到底部的任何东西BBC网站！

我可以将 min-height 增加到更大的数字以覆盖BBC页面的整个长度，页面很短，我会在底部得到一个巨大的白色空间！所以增加 min-height 不是一个好的做法。

如何删除iframe并使用浏览器的滚动栏来上下浏览页面。

谢谢！

解决方案

有不同的方法。还有jQuery解决方案。这将有助于您开始：

演示： http：/ /jsbin.com/voqubo/1

CSS

  body，html {padding：0; margin：0; height：100％;} 
 
 html {overflow-y：auto} 
 
 .embed-container {
 position：relative; 
 height：100％; 
 max-width：100％; 
} 
 
 .embed-container iframe，
 .embed-container对象，
 .embed-container embed {
 position：absolute; 
 top：0; 
 left：0; 
 bottom：0; 
 width：100％; 
 height：100％; 
} 
  

HTML

 < div class ='embed-container'>< iframe src ='http：//www.bbc.com/'style ='border：0'>< iframe>< / div> 
  

I set up a iframe like below

<iframe src="http://www.bbc.com/" frameborder="0" width="100%"></iframe>

CSS

iframe { overflow:hidden;
         min-height:600px}

2 horizontal scrolling bars appear, 1 is at the iframe and the other is at the browser.

I want to get rid of the bar at iframe, I try

 <iframe src="yahoo.com" scrolling="no" frameborder="0" width="100%"></iframe>

Then the scrolling bar at the iframe disappeared, and the problem is I cannot see anything at the bottom of BBC website!

I could increase min-height to greater number to cover entire length of BBC's page, but sometimes the page is very short and I'll get a huge white space at the bottom! So that increase the min-height is not a good practice.

How can I remove the scrolling bar at the iframe and use the browser's scrolling bar to navigate the page up and down?

Thank you!

解决方案

There are different ways of doing this. There's jQuery solutions too. This will help you get started:

DEMO: http://jsbin.com/voqubo/1

CSS

body,html {padding:0;margin:0;height:100%;}

html {overflow-y:auto}

.embed-container {
    position: relative;
    height: 100%;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

HTML

<div class='embed-container'><iframe src='http://www.bbc.com/' style='border:0'></iframe></div>  

这篇关于HTML iframe - 双滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！