隐藏iframe滚动条:没什么用

时间:2017-06-24 20:14:38

标签: javascript jquery html5 css3 iframe

我已尝试在互联网上删除HTML页面中的滚动条。我不断获得双滚动条,这是我不想要的。我做了一个页面,顶部有一个菜单栏,想要在菜单栏下面嵌入一个页面。但我得到的是这样的输出:Take a look at this picture and notice the dual scrollbar.我在我的html中尝试了以下代码:

<style>
#container{width: 100%; height: 100%; overflow: hidden;}
  iframe{width: 100%; height: 100%; border: 0;}
  body {
      margin: 0;
  }
</style>
<body>
<div id="container">
  <iframe src="http://myurlhere.somedomain"></iframe>
</div>
</body>

任何想法我应该怎么做?

PS:我想保留正文滚动条,但删除了iframe滚动条,我想要完整浏览器宽度和高度的结果。请不要发布

等答案
<iframe src="url" scrolling="no"></iframe>

frameborder="0"

iframe 
  {
  overflow-x:hidden;
  overflow-Y:hidden;
  }

因为所有这些方法不值得工作!

我需要滚动iframe但没有滚动条。希望我对这个问题足够清楚。

2 个答案:

答案 0 :(得分:0)

尝试使用iframe resizer https://github.com/davidjbradshaw/iframe-resizer 它隐藏iframe滚动条并根据父窗口大小调整它。

答案 1 :(得分:0)

在屏幕截图中,您似乎正在使用包含菜单的顶部框架,并将内容加载到100%高度的iframe中。

您获得双滚动条的原因是因为100%的高度不会减去菜单的高度。

由于父窗口不知道iframe内容的高度(除非你使用了相当多的javascript),你最好确保父窗口不会显示滚动条并使用来自iframe的滚动条。这确实会使菜单始终位于窗口的顶部,这可能是也可能不是。

根据您想要支持的浏览器,您可以尝试使用一些仅限CSS的方法。

(编辑:明确标注不同的方法)

方法1:css flex

实现这一目标的最简单方法是使用display: flex。通过提供body一个display: flex; flex-direction: column#container一个flex: 1#container填充标题后的剩余高度。示例:https://jsfiddle.net/Ldyb418y/

方法2:css calc

如果标题有一个固定的高度,您可以使用css的calc()使高度100% - 标题的高度:#container { width: 100%; height: calc(100% - 30px); overflow: hidden; }。示例:https://jsfiddle.net/jgdyqe1t/

方法3:框大小和填充

如果由于某种原因您无法使用calc而您的标头高度固定,则可以将#container { width: 100%; height: 100%; overflo: hidden; box-sizing: border-box; padding-top: 30px; }position: absolute结合使用标题。这会将标题放在iframe的顶部填充上。示例:https://jsfiddle.net/dtk9ed8f/

方法4:从javascript

设置iframe高度

如果您不希望菜单始终保持最佳状态,那么您仍然坚持使用javascript。在这种情况下,您需要使iframe足够高以适合所有内容。但是,这意味着您需要以某种方式访问​​iframe的内容以获得其高度。这仅在父框架和iframe位于同一域时才有效。

使用hjpotter92在Make iframe automatically adjust height according to the contents without using scrollbar?

中描述的方法

从上面的帖子中删除:

<script>
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

关于iframe:

<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

您需要从overflow: hidden中删除#container。示例:https://jsfiddle.net/wbznd35n/