CODEWITHSUNDEEP
htmlcssiframe
Maram A-zaid
Maram A-zaid

Reputation: 55

How to make the web page content fits 100% the div in iframe

I want to add a page in the <iframe> but I am facing a problem with the height of the page in iframe

I don't want to make it fixed. it should be changed depending on the height of the page in the <iframe>, if it is 800px then the content should be displayed without the double scroll bar

<!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/[email protected]/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>

This an example to be more clear.

Let's assume the right space in the menu bar, I embedded a page by <iframe> using the style below.

I used padding-bottom:100% to set the height of the page.

If I change the size of the screen the height will be affected badly.

How can I set the height where it fits all the types of screens not only one screen (without double scroll bar)

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

Upvotes: 0

Views: 78

Answers (1)

s1834
s1834

Reputation: 443

Use Viewport Units like vw for width and vh for height instead of px or % because it will help you make your webpage/website responsive.

It should solve your problem but if it doesn't let me know in the comments, I wil try my best to help you.

Upvotes: 1

Related Questions