Question

我需要创建一个包含某些html页面的预览或缩放视图的html页面。我尝试使用iframe和扩展iframe来实现这一点。通过显示它看起来很好。但即使在iframe缩放后，它也需要iframe内容的宽度和高度。对此有什么解决方案吗？

 <html>
    <head>
    <style type="text/css">
    #viewCollasheRow1 {
        table-layout: fixed;
        width: 100%;
        height: 35%;
    }

    .viewCollasheColumn1 {
        width: 445px;
        height: 192px;
        padding: 0;
        overflow: hidden;
    }
    .viewCollasheColumn1Content {
        width: 1775px;
        height: 760px;
        -ms-transform: scale(0.25);
        -moz-transform: scale(0.25);
        -o-transform: scale(0.25);
        -webkit-transform: scale(0.25);
        transform: scale(0.25);
        -ms-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    </style>
    </head>
    <body>
        <
        <table id="viewCollasheRow1">
            <tr>
                <td class="viewCollasheColumn1"><iframe id="viewLabelFrame"
                        class="viewCollasheColumn1Content" src="./iframe1.html"
                        scrolling="no"></iframe></td>
                <td class="viewCollasheColumn1"><iframe id="viewLabelFrame"
                        class="viewCollasheColumn1Content" src="./iframe1.html"
                        scrolling="no"></iframe></td>

            </tr>
        </table>
    </body>
    </html>

iframe内容html页面

<html>
<head>
<style type="text/css">
#testDiv {
    width: 100%;
    height: 100%;
}
</style>
</head>
<body>
    <div id="testDiv"></div>
</body>
</html>

任何帮助都将非常有用。

Answer 1

如果您要将iframe的高度设为100％并且父div为所需的高度，我相信您将获得所需的效果。

＆＃xA;＆＃xA;

摘录来自你的css：

＆＃xA;＆＃xA;

  .viewCollasheColumn1Content {＆＃xA;宽度：1775px;＆＃xA;身高：100％;＆＃xA; -ms-transform：scale（0.25）;＆＃xA; -moz-transform：scale（0.25）;＆＃xA; -o-transform：scale（0.25）;＆＃xA; -webkit-transform：scale（0.25）;＆＃xA;变换：scale（0.25）;＆＃xA; -ms-transform-origin：0 0;＆＃xA; -moz-transform-origin：0 0;＆＃xA; -o-transform-origin：0 0;＆＃xA; -webkit-transform-origin：0 0;＆＃xA; transform-origin：0 0;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

https://jsfiddle.net/9sc3eqvk/

＆＃xA;＆＃xA;

也许我误解了你的问题。＆＃xA; iframe的父母div将控制iframe的高度和可见内容。将iframe设置为100％可确保填充父div。

＆＃xA;

在html页面中创建html页面的预览

1 个答案: