我在网上看到了这个问题,所有建议的解决方案都不适合我,所以我想我会来这里.
我有一个有iframe的页面.页面顶部是下拉菜单,页面的其余部分是iframe.像我确信其他人一样,这个想法是让菜单保持静止,菜单选择在iframe中运行一个应用程序.iframe的内容应该滚动,但整个页面不应该滚动.
我已经尝试将iframe width=height=100%放在单个表元素中,width=height=100%但如果我使窗口垂直太短,我会得到两个滚动条.
有什么建议？
我想我没有很好地解释自己.我想将iframe中的滚动条保持为自动,但我不想要整个页面的滚动条.我需要iframe适当大小,因此它总是占用页面的其余部分,因此浏览器不必创建滚动条,因为iframe永远不会延伸到查看区域的底部.
我在div里面有一个iframe.我希望iframe的大小正好是其父div的大小.我使用以下代码来设置iframe的宽度和高度.
<iframe src="./myPage.aspx" id="myIframe"
style="position: relative;
height: 100%;
width: 100%'
scrolling='no'
frameborder='0'">
但iframe的宽度与div不同,也显示水平和垂直滚动条.
这里所有的总高度<div>是900像素,但jQuery函数返回身体的高度为577像素.(如果我删除了身体CSS,它正在工作).
有这个问题的解决方案吗？
$j(function() {
alert($j("body").height());
})
html, body {
height:100%;
}
<div style="height:200px">header</div>
<div style="height:500px">content</div>
<div style="height:200px">footer</div>
我正在尝试动态调整iframe的大小以适应其内容.为此,我有一段代码:
$("#IframeId").height($("#IframeId").contents().find("html").height());?
它不起作用.是因为跨域问题吗？我如何使它适合？请看看Fiddle:JsFiddle
ps我已经设置了链接的html和正文 height:100%;
我见过很多人问如何使 iframe 100% 高度。可以使用一些 CSS 轻松存档。它将使 iframe 相对于设备屏幕显示 100%。但是如何根据其内容使 iframe 100% 高度？
这是我当前根据设备屏幕制作 100% iframe 的代码：
iframe {
display: block;
background: #000;
border: none;
height: 100vh;
width: 100vw;
} <iframe src="https://...">Your Browser Does Not Support iframes!</iframe>在allowfullscreen和position:absolute没有除了撞毁我的网站模板的帮助。这是我在不破坏主 CSS 的情况下能做的最好的事情。请帮忙...
编辑：iframe 内容响应使用
<meta name="viewport" content="width=device-width,initial-scale=1">
所以使用javascript预设高度也不起作用。也许有一种使用高度单位的方法？
em, ex,rem等等？或者使它成为特定的百分比vw？
基本上我想要做的是在我的页面顶部有一个单一的、细长的工具栏，其中有一排用作按钮的各种 DIV 容器。我希望这些按钮更新工具栏下方 iframe 的内容。问题是我的工具栏下方的 iframe 高度只有 150 像素。具体来说，当我指定时会发生这种情况<!DOCTYPE html>，但是当我不指定此 HTML5 文档类型时，它可以正常工作。
我读了一点，看起来原因是 HTML5 不再涵盖能够设置 iFrame 宽度和高度的百分比。 但是现在我被卡住了，因为我无法让 iFrame 增长到工具栏下窗口剩余高度的 100%。我什至创建了一个 iframe_container DIV 并将 iframe 放入其中， iframe_container 位于 height=%100 但我仍然无法使其正常工作。
HTML：
<!DOCTYPE html>
<html>
<body>
<div class="header_bar">
<div class="tab_active" onclick="location.href='...'">Tab1</div>
<div class="tab_inactive" onclick="location.href='...'">Tab2</div>
<div class="tab_inactive" onclick="location.href='...'">Tab3</div>
</div>
<div class="iframe_container">
<iframe id="main_iframe" class="main_iframe" frameborder="0" src="...">
</iframe>
</div>
</body>
</html>
CSS：
.iframe_container {
width: 100%;
height: 100%;
}
.main_iframe {
width: 100%;
height: 100%;
}
.header_bar {
float: none; …我需要删除 iframe 中的垂直滚动条。我试过使用overflow: hidden;还是不行。请帮忙。
代码：
#iphone4 {
background-image: url("ipad_new2.png");
background-repeat: no-repeat;
height: 900px;
width: 750px;
margin: auto ;
position: relative;
overflow: hidden;
}
/*Mobile iframe CSS*/
iframe {
height: 700px;
width: 525px;
position: absolute;
top: 68px;
margin: auto ;
left: 61.99px;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="iphone4" >
<iframe src="index_atish.html" seamless="seamless"></iframe>
</div>
</body>
</html>