Question

我想要实现的是在iframe中设置一个可滚动的，可自动调整大小的div。

问题是iframe与div不同，它本身有一个滚动，因此我的div的overflow-y属性被忽略，我的div的整个内容被显示，而不是只是一小部分。

最佳解释是一个示例，您可以通过单击查看该示例 http://www.alocet.com/VictorsTestFolder/Sample/Default.html

当我将“html，body，form {height：100％; margin：0px; padding：0px;}”添加到IFrame页面时，它几乎可以工作，但不幸的是我无法摆脱重复滚动条。

有什么建议吗？

Answer 1

如果没有JavaScript，我会说你不能真正做你想做的事情。

Divs就是这样不行。它们通常会根据需要溢出，溢出到任何地方。根据内容保持div大小的唯一方法（我讲经验）就是给它一个明确的高度。否则，它将溢出其容器，或者如果其容器是自己的block formatting context，则会导致其容器开始滚动。

iframe似乎是它自己的上下文。因此，如果你想让它包含的div保持紧凑，你必须设置一个显式高度。我看到两个选项：

您可以为服务器添加参数以更改页面的高度：

<iframe src="Default_files/IFrame2.htm?h=400"

~~然后，为整个页面创建一个包含div，其高度固定在iframe中。它内部的所有内容都应该正常流动。~~然后，将可能包含大量内容的div设置为固定大小。

另一个选择是使用JavaScript，我认为可以使用document.documentElement.clientWidth准确获取您正在寻找的变量。 See this article for more details。即使在这种情况下，您仍然最终将框架页面设置为固定高度。

这两种方法都是粗略的解决方法，但我有点相信你不能用CSS做你想做的事。

Answer 2

你的第三个例子有什么问题？你有一个固定大小的iframe，div里面还有一个滚动条。

你的意思是可滚动的，可自动调整大小的div当然如果它是自动调整大小它不会有滚动条吗？

否则我建议在div中使用div，你将拥有更多的控制权，你的内容仍会在搜索引擎上显示。

Answer 3

因此执行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>

在iframe内溢出-y

3 个答案: