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

编程入门行业动态更新时间:2024-10-21 09:41:17

本文介绍了在HTML页面中创建HTML页面的预览的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我需要创建一个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; }

jsfiddle/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页面的预览

本文发布于:2023-10-08 01:37:08，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1471136.html