Fatal编程技术网
  • html/
  • Html 如何使网页内容100%符合iframe中的div

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

html css iframe

Html 如何使网页内容100%符合iframe中的div,html,css,iframe,Html,Css,Iframe,我想在中添加一个页面，但我在iframe中遇到了页面高度的问题 我不想把它修好。它应该根据中页面的高度进行更改，如果它是800px，则应在不使用双滚动条的情况下显示内容 <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-U

我想在
中添加一个页面，但我在iframe中遇到了页面高度的问题

我不想把它修好。它应该根据
中页面的高度进行更改，如果它是800px，则应在不使用双滚动条的情况下显示内容

<!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>




<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>
使用视口单位如vw表示宽度和vh表示高度，而不是px或%，因为这将帮助您使网页/网站具有响应性

它应该可以解决您的问题，但是如果它在评论中没有让我知道，我会尽力帮助您。

谢谢您，我非常感谢您的支持。t在我将%替换为后，它工作正常vh@MaramA-zaid我很高兴听到我的解决方案对你有用，感谢你接受并投票支持我的答案，这对我来说意义重大。我希望我有更多的机会帮助你。