如何使用javascript或css自动调整iframe的高度以适应内容[duplicate]

q8l4jmvw 于 2022-12-10 发布在 Java

关注(0)|答案(1)|浏览(152)

此问题在此处已有答案：

Adjust width and height of iframe to fit with content in it（36个答案）
13个小时前关门了。
我有一个内嵌pdf文件的iframe，但我想确保iframe根据其中的内容自动扩展其高度，以便不显示iframe滚动条，但每次我尝试时，结果都出乎意料。以下是我的示例代码
这是我尝试过的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Iframe</title>
<style>
    iframe{
        width: 100%;
        border: 2px solid #ccc;
    }
</style>
</head>
<body>
    <iframe src="demo.pdf" id="myIframe"></iframe>
    
    <script>
    var iframe = document.getElementById("myIframe");
 
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>
</body>
</html>

JavaScript

来源：https://stackoverflow.com/questions/74740192/how-to-automatically-adjust-the-height-of-iframe-to-fit-the-contents-using-javas

1条答案

按热度按时间

xlpyo6sf1#

删除脚本中的height
在css中添加fit-content

<html lang="en">
<head>
<meta charset="utf-8">
<title>Iframe</title>
<style>
    iframe{
        height: fit-content;
        width: 100%;
        border: 2px solid #ccc;
    }
</style>
</head>
<body>
    <iframe src="demo.pdf" id="myIframe"></iframe>
    
    <script>
    var iframe = document.getElementById("myIframe");
 
    iframe.onload = function(){
    iframe.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>
</body>
</html>

赞(0）回复(0）举报 2022-12-10

我来回答

如何使用javascript或css自动调整iframe的高度以适应内容[duplicate]

1条答案

相关问题

热门标签

最新问答