我想要实现的是在 iframe 中拥有一个可滚动、可自动调整大小的 div。
问题是 iframe 与 div 不同，它本身有一个滚动，因此我的 div 的 overflow-y 属性被忽略，我的 div 的全部内容被显示，而不是一小部分。
最好的解释是一个示例，您可以通过单击查看 http://www.alocet.com/VictorsTestFolder/Sample/Default.html
当我将 CSS "html,body,form{ height:100%; margin:0px; padding:0px;}" 添加到 IFrame 页面时，它几乎可以工作，但不幸的是我无法摆脱重复滚动条。
有什么建议吗？
【问题讨论】：
标签： css iframe height overflow
我要冒昧地说，如果没有 JavaScript，你真的无法做你想做的事情。
Divs 不是那样工作的。它们通常会根据需要溢出，溢出到任何地方。防止 div 根据其内容（我说的是经验）调整大小的唯一方法是给它一个明确的高度。否则，它要么溢出它的容器，要么如果它的容器是它自己的block formatting context，使它的容器开始滚动。
iframe 似乎是它自己的上下文。因此，如果你想让它包含的 div 保持紧凑，你必须设置一个明确的高度。我看到了两个选项：
您可以为服务器添加一个参数来改变页面的高度：
<iframe src="Default_files/IFrame2.htm?h=400"
然后，为整个页面创建一个包含 div，该 div 具有适合 iframe 的固定高度。它里面的一切都应该正常流动。然后，将可能有很多内容的div设置为固定大小。
另一种选择是使用 JavaScript，我认为它可以使用 document.documentElement.clientWidth 准确获取您正在寻找的变量。 See this article for more details。即使在这种情况下，您最终仍将框架页面设置为固定高度。
这两种方法都是粗略的解决方法，但我有点相信你不能只用 CSS 做你想做的事。
【讨论】：
你的第三个例子有什么问题？你有一个固定大小的 iframe，里面的 div 仍然有一个滚动条。
另外你所说的可滚动、自动调整大小的 div 是什么意思，如果它自动调整大小，它肯定不会有滚动条吗？
否则我建议在 div 中使用 div，这样您将拥有更多控制权，并且您的内容仍将显示在搜索引擎上。
【讨论】：
所以执行 onload 的简单 javascript 的实现解决了我的问题......好吧，部分，因为如果你有一个固定高度 div 内的表，它会超过指定的 div 高度......所以我试图找到现在解决这个问题...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
html, body, form
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" language="javascript">
window.onresize = doResize;
window.onload = doResize;
function doResize() {
document.getElementById("popupHeight").style.height = (window.innerHeight - 40) + 'px';
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="popupHeight">
Text before the div
<br />
<div runat="server" id="tblTabGroups" style="overflow-y: scroll; height: 100%;">
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
scrollable<br />
</div>
Text after the div
</div>
</form>
</body>
</html>
【讨论】：