文章/答案/技术大牛

发布

社区首页 >问答首页 >在html页面中创建html页面的预览

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

Stack Overflow用户

提问于 2015-12-11 14:02:19

回答 1查看 3.1K关注 0票数 0

我需要创建一个html页面包含一些html页面的预览或缩放视图。我尝试使用iframe和缩放iframe来实现这一点。通过显示，即使在缩放iframe之后，它看起来也是good.But的，它采用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>

任何帮助都是非常有帮助的。

html

css

iframe

回答 1

Stack Overflow用户

发布于 2015-12-11 14:33:22

如果你将iframe的高度设为100%，而父div设为所需的高度，我相信你会得到想要的效果。

摘自你的css：

.viewCollasheColumn1Content {
    width: 1775px;
    height: 100%;
    -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;
}

https://jsfiddle.net/9sc3eqvk/

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34217074

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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