在HTML页面中创建HTML页面的预览 [英] Create a preview of html page in html page
问题描述
我需要创建一个HTML页面，其中包含某些HTML页面的预览或缩放视图.我尝试使用iframe并缩放iframe来实现此目的.通过显示，它看起来不错.但是即使对iframe进行了缩放，它也会占用iframe内容的宽度和高度.有什么解决办法吗?
I need to create an html page containing preview or scaled view of some html pages. I tried to implement this using iframe and scaling the iframe. By display it is looking good.But even after iframe is scaled it takes the width and height of iframe content. Is there any solution for this?
<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页面
Iframe content html page
<html>
<head>
<style type="text/css">
#testDiv {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="testDiv"></div>
</body>
</html>
任何帮助都会真的有帮助.
Any help will be realy helpful.
推荐答案
如果将iframe的高度设置为100％，将父div设置为期望的高度，那么我相信您会获得期望的效果.
If you were to give the iframe a height of 100% and the parent div the desired height, I believe you'll get the desired effect.
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.
Maybe I misunderstand your question though. The iframe's parent div will control the iframe's height and what is visible. Setting the iframe to 100% ensures that it fills the parent div.
这篇关于在HTML页面中创建HTML页面的预览的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
