Html 如何使 iFrame 没有滚动条

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6217857/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:53:54  来源:igfitidea点击:

How to make iFrame not have the scrolling bar

htmlcssiframe

提问by Genadinik

I am working on making a widget like this one here:

我正在制作一个像这样的小部件:

http://www.comehike.com/outdoors/widget.php?hike_id=176&height=400&width=700

http://www.comehike.com/outdoors/widget.php?hike_id=176&height=400&width=700

And for some reason I can't seem to make scrolling bar go away. Does anyone know how to do that?

出于某种原因,我似乎无法让滚动条消失。有谁知道这是怎么做到的吗?

Thanks!

谢谢!

回答by aorcsik

Like this:

像这样:

<iframe ... scrolling="no"></iframe>

Edit:Also frameborder="0"is handy to hide the border.

编辑:frameborder="0"隐藏边框也很方便。

回答by Bobby Hyman

iframe { overflow: hidden; }

ought to do it. However, do you reallywant to do that? Any content that is not immediately viewable will then not be available (without the user jumping through hoops to scroll it via the keyboard).

应该这样做。然而,你真的想这样做吗?任何不能立即查看的内容都将不可用(用户无需跳过箍以通过键盘滚动它)。

回答by Vasiliy Sharapov

The CSS property that deals with the document being larger than the viewable areais overflow.

处理文档大于可视区域的 CSS 属性是overflow.

This is commonly used to make scrollable divs as seen in this example.

这通常用于制作可滚动的divs,如本例所示

The value you're looking for is: hiddenwhich will clip the areaoutside of the visible range. Something like:

您正在寻找的值是:hidden这将裁剪可见范围之外的区域。就像是:

<iframe style="overflow:hidden;" src="URL" />

Should look nice a a widget

应该看起来不错 aa 小部件

So for CSS properties you might want:

因此,对于 CSS 属性,您可能需要:

overflow:hidden;
border:none;
width:100px;
height:25px;"

And for iframe properties you probably want:

对于您可能想要的 iframe 属性:

scrolling="no"
frameborder="0"
allowTransparency="true"

Read upon these to understandwhat they do, but they are the ones common to widgetslike what you describe in your question. Together they should produce a good looking widget.

阅读这些内容以了解它们的作用,但它们是小部件常见的部件,例如您在问题中描述的部件。他们应该一起产生一个好看的小部件。

回答by The_HTML_Man

Just add the scrolling="no"attribute to your iframe.

只需将该scrolling="no"属性添加到您的 iframe。

Note: this will not work in HTML5.

注意:这在 HTML5 中不起作用。

回答by KalamariKing

Although

虽然

overflow:hidden;

overflow:hidden;

may work with Firefox, it doesn't work with IE or Chrome. If you are NOT using HTML5, then you can use scrollable=no.

可能适用于 Firefox,它不适用于 IE 或 Chrome。如果您不使用 HTML5,则可以使用scrollable=no.