文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使网页内容100%符合iframe中的div

问如何使网页内容100%符合iframe中的div
EN

Stack Overflow用户

提问于 2020-07-20 17:38:46

回答 1查看 54关注 0票数 0

我想在<iframe>中添加一个页面，但是在iframe中，该页面的高度面临一个问题。

我不想把它修好。它应该根据<iframe>中页面的高度进行更改，如果它是800 of ，则应该不使用双滚动条来显示内容。

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>

<body>


  <div class="col-lg-12">
    
 <div class="col-lg-9">

        <div class="divFrame">
        <iframe src="https://mattboldt.com/demos/typed-js/" id="myIframe" class="iframe"  frameborder="0" 
    ></iframe> 
    
    </div>

  
  </div>
    </div>

</body>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>

这是一个更清楚的例子。

让我们假设菜单栏中有正确的空间，我使用下面的样式通过<iframe>嵌入了一个页面。

我使用padding-bottom:100%来设置页面的高度。

如果我改变屏幕的大小，高度会受到严重的影响。

如何设置适合所有类型屏幕的高度，而不仅仅是一个屏幕(没有双滚动条)

<style>

.divFrame
{
padding-bottom:100%; position:relative; display:block; width: 100%;top: 0px; left: 0; right: 0; bottom: 0
}
.iframe
{
position:absolute; top:0; left: 0; width: 100%; height: 100%; 
}

</style>

html

css

iframe

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-20 17:47:04

使用视图端口单元(如vw表示宽度)和vh (高度)代替E 110pxE 211或E 112%<代码>E 213，因为它将帮助您使网页/网站响应。

它应该解决你的问题，但如果它不让我知道在评论，我会尽力帮助你。

票数 1

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

原文链接：

https://stackoverflow.com/questions/63000986

复制

相似问题

问如何使网页内容100%符合iframe中的div
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使网页内容100%符合iframe中的divEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使网页内容100%符合iframe中的div
EN