如何根据其内容将iframe高度设置为100％ [英] How to Make iframe 100% height according to its content

问题描述

我见过很多人问如何使iframe达到100％的高度.可以使用一些CSS轻松地将其存档.它将使iframe相对于设备屏幕显示100％.但是如何根据其内容将iframe的高度设置为100％?

I had seen a lot of people asking how to make iframe 100% height. That can be easily archived using some CSS. It will make the iframe display 100% as relative to the device screen. But how to make iframe 100% height according to its content?

这是我当前根据设备屏幕制作100％iframe的代码:

Here's my current code to make 100% iframe according to device screen:

        iframe {
        display: block;
        background: #000;
        border: none;
        height: 100vh;
        width: 100vw;
    }

    <iframe src="https://...">Your Browser Does Not Support iframes!</iframe>

allowfullscreen和position:absolute除了崩溃了我网站的模板外没有帮助.这是我最好的方法，不会使主要CSS崩溃.请帮忙...

The allowfullscreen and position:absolute didn't help except for crashing my site's template. This is the best I can do without crashing the primary CSS. Please help...

iframe内容使用

<meta name="viewport" content="width=device-width,initial-scale=1">

因此使用javascript预设的高度也不起作用.也许有办法代替身高单位吗?

so preset height using javascript didn't work too. Perhaps is there a way of using height units instead?

em，ex，rem等?还是将其指定为vw的特定百分比?

em, ex, rem etc? Or make it a specific percentage of vw?

推荐答案

没有唯一的CSS方法可以根据其内容设置iframe高度. 您需要使用JavaScript来获取iframe内容高度，然后将其设置为iframe高度.

There is no CSS only way to set iframe height according to its content. You need to use JavaScript to get iframe content height and then set as iframe height.

如何使用JavaScript实现此目的，并在以下问题中得到了很好的解释:

how to achieve this using JavaScript answered and well explained in the following questions:

1. 使iframe根据内容而不使用滚动条?

2. 使iframe高度动态化基于内部内容-JQUERY/Javascript

使用iquery将iframe调整为内容

调整宽度iframe以适合其中的内容

跨域iframe调整器?

这篇关于如何根据其内容将iframe高度设置为100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！