setting the height of a Div with an html iframe inside

maqskywalker
maqskywalker used Ask the Experts™
on
I have this fiddle
https://jsfiddle.net/by69pLr0/

I have an iframe inside a Div. The div has a blue border and the iframe has a red border.

I set the height of the div to 100% percent and the height of the iframe to 100%.

When i run it, the div isn't taking up the full 100% height of the browser window.

How do i fix my fiddle so that the height of the div and iframe inside stretch the full height of the window?

As pointing by this arrow in this image:

DivHeight.PNG
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
That is because an iframe is a new web page and by default the body tag has a margin.

Add this to the <head> of your iframe page

<style>
body {
   margin: 0;
}
</style>

Open in new window

Sam JacobsDirector of Technology Development, IPM
Commented:
It's not the iFrame ... it's the DIV, which isn't stretching to 100% because you also need to set its parent's height to 100%.
You can do this by adding the following to the <style> section::
html,
body { 
height: 100%;
}

Open in new window

CSS height can't take a percentage value like this.
If you want your div to take up the full height of the browser window, you have to set it like this:

        #Div1 {
            border: 1px solid #0000FF;
            height: 100vh;
        }

Open in new window

Author

Commented:
thanks experts.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial