gpt4 book ai didi

javascript - JS - 100% 且无滚动的 iframe 高度(正文中的 Scroll-y)

转载 作者:数据小太阳 更新时间:2023-10-29 04:39:20 31 4
gpt4 key购买 nike

我有一个 iframe 问题。首先,我在 https://stackoverflow.com/search?tab=relevance&q=iframe%20height 中搜索关键字 iframe height但我没有找到我需要的人。

如何制作一个高度为 100% 且无滚动的 iframe。在正文中滚动 Y。

<body style="scroll-x:hidden;scroll-y:auto;">
<iframe frameborder="0" id="iframe" scrolling="no" src="http://www.google.com" style="width:960px;height:100%" height="100%" width="960"></iframe>

如果我通过 http://www.google.com 搜索某些内容在iframe中,之后转到google搜索结果页面。 iframe 将计算新的高度并且 iframe 高度仍然为 100%,正文部分的滚动条。 (我希望一些帮助不仅在 ie 和 firefox 中,而且在 safari 和 chrome 中都能完美工作)。非常感谢。

最佳答案

这应该可以满足您的需求:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>

<style type="text/css" media="screen">

body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}

* {
padding: 0;
margin: 0;
}

iframe {
width: 960px;
height: 100%;
overflow: hidden;
border: none;
}
</style>

</head>
<body>

<iframe src="http://google.com" scrolling="no"></iframe>

</body>
</html>

这里的关键是:

  • 将 BODY 和 HTML 元素设为浏览器窗口的 100%,这样当您将 iFrame 设为 100% 时,它就应该是 100%。
  • 将 BODY 和 HTML 元素设置为溢出:隐藏以便不显示滚动条
  • 确保没有填充

希望对你有帮助

关于javascript - JS - 100% 且无滚动的 iframe 高度(正文中的 Scroll-y),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5956208/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com