CODEWITHSUNDEEP
htmlcssiframe
FrozzenFinger
FrozzenFinger

Reputation: 1540

Make an Iframe fits to a parent div

i'm trying to display an Iframe and i want it to take all the space available. I tried a lots of techniques found on the internet but nothing works.

Code file : 

#myDiv {
    width:100%;
    height: 100%;
}

#myFrame {
    display:block;
    width:100%;
    height: 100%;
    position: relative;
}
<app-navbar></app-navbar>
<div class="container" style="margin-top:100px;">
  <div class="container" id="myDiv">
    <iframe id="myFrame" src="http://localhost:8000" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts">
    </iframe>
  </div>
</div>

and this is what i have right now but i would like the blue box to take all the white space. enter image description here thank you for helping me !

Upvotes: 1

Views: 61

Answers (3)

git-e-up
git-e-up

Reputation: 904

For responsive iframe css, typically you see something like this 

#myDiv {
  width:100%;
  height: 0;
  position: relative;
  padding-bottom: 56.25%;
}

#myFrame {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16341

Change the height of your parent div to a specific height or to 100vh if you want the iframe to occupy the whole viewport height.

Check the jsFiddle: https://jsfiddle.net/AndrewL64/yb36ju36/ to see how it would look like. I am linking the iframe to jsfiddle itself just for example's sake.

#myDiv {
    width:100%;
    height: 100vh;
}

#myFrame {
    width:100%;
    height: 100%;
}
<div class="container" style="margin-top:100px;">
  <div class="container" id="myDiv">
    <iframe id="myFrame" src="https://jsfiddle.net" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts">
    </iframe>
  </div>
</div>

Upvotes: 1

rudyjm3
rudyjm3

Reputation: 1

at the end of the script <iframe src="http://localhost:8000" Add This at the end width= "100%" height= "100%">The height part only if you need it

Upvotes: 0

Related Questions