我已尝试在互联网上删除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但没有滚动条。希望我对这个问题足够清楚。
答案 0 :(得分:0)
尝试使用iframe resizer https://github.com/davidjbradshaw/iframe-resizer 它隐藏iframe滚动条并根据父窗口大小调整它。
答案 1 :(得分:0)
在屏幕截图中,您似乎正在使用包含菜单的顶部框架,并将内容加载到100%高度的iframe中。
您获得双滚动条的原因是因为100%的高度不会减去菜单的高度。
由于父窗口不知道iframe内容的高度(除非你使用了相当多的javascript),你最好确保父窗口不会显示滚动条并使用来自iframe的滚动条。这确实会使菜单始终位于窗口的顶部,这可能是也可能不是。
根据您想要支持的浏览器,您可以尝试使用一些仅限CSS的方法。
(编辑:明确标注不同的方法)
实现这一目标的最简单方法是使用display: flex
。通过提供body
一个display: flex; flex-direction: column
和#container
一个flex: 1
,#container
填充标题后的剩余高度。示例:https://jsfiddle.net/Ldyb418y/
如果标题有一个固定的高度,您可以使用css的calc()
使高度100% - 标题的高度:#container { width: 100%; height: calc(100% - 30px); overflow: hidden; }
。示例:https://jsfiddle.net/jgdyqe1t/
如果由于某种原因您无法使用calc
而您的标头高度固定,则可以将#container { width: 100%; height: 100%; overflo: hidden; box-sizing: border-box; padding-top: 30px; }
与position: absolute
结合使用标题。这会将标题放在iframe的顶部填充上。示例:https://jsfiddle.net/dtk9ed8f/
如果您不希望菜单始终保持最佳状态,那么您仍然坚持使用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/