How do I set the height of an iframe with the min-height property in the body?

Question

a:hover{
    cursor:url(files/link.cur),progress;
}

body{
    width:80%;
    background-color:rgba(255,255,255,0.75);
    margin:auto;
    height: 100%;
    min-height: 100%;
}

html{
    Background-color:#8888FF;
    background-image:url(files/bg.jpg);
    background-attachment:fixed;
    background-position:center;
    background-size:cover;
    height:100%;
}

html, body{
    cursor:url(files/cursor.cur),progress;
}

iframe{
    overflow:hidden;
    height:80%;
    width:100%;
    border-width:1px;
}

img{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:90%;
}

p{
    margin-right:10px;
    margin-left:10px;
    text-align:center;
    font-family:calibri;
    font-size:16px;
}

#menu a{
    display:inline-block;
    background-color:#0066FF;
    text-decoration:none;
    font-family:calibri;
    color:#FFFFFF;
    padding:10px 10px;
} 

#menu a:hover{
    background-color:#00AAFF;
}

a.active{
    background-color:#0088FF !important;
}

a.active:hover{
    background-color:#00AAFF !important;
}

<!DOCTYPE html>
<html>
    <head>
        <title>
            Foto's
        </title>
        <link rel="icon" type="image/png" href="files/icon.png">
        <link rel="stylesheet" href="style.css">
        <script src="files/javascript.js">
        </script>
    </head>
    <body onload="start()">
        <br>
        <div id="menu">
            <p style="font-size:20px;">
                <a href="index.html">
                    Welkom
                </a><a href="agenda.html">
                    Agenda
                </a><a href="fotos.html">
                    Foto's
                </a><a href="contact.html">
                    Contact
                </a>
            </p>
            <p style="font-size:16px;">
                <a onclick="go('camera/1993-1994.html', this)">
                    1993-1994
                </a><a onclick="go('camera/1994-2003.html', this)">
                    1994-2003
                </a><a onclick="go('camera/2003-2004.html', this)">
                    2003-2004
                </a><a onclick="go('camera/2005-2006.html', this)">
                    2005-2006
                </a><a onclick="go('camera/2006-2007.html', this)">
                    2006-2007
                </a><a onclick="go('camera/2007-2008.html', this)">
                    2007-2008
                </a><a onclick="go('camera/2008-2009.html', this)">
                    2008-2009
                </a><a onclick="go('camera/2009-2010.html', this)">
                    2009-2010
                </a><a onclick="go('camera/2011-2012.html', this)">
                    2011-2012
                </a><a onclick="go('camera/2013-2014.html', this)">
                    2013-2014
                </a><a onclick="go('camera/2014-2015.html', this)" id="one">
                    2014-2015
                </a>
            </p>
        </div>
        <iframe id="iframe">
        </iframe>
    </body>
</html>

I've set the height of the iframe to 80% but it doesn't work. It did work when the height of the body was set to 100% but I'm now using min-height and this problem developed. Also, I can't center the iframe using margin-left and margin-right:auto;. Does anyone know why the CSS properties are not working and how to fix it?

Thank you very much!

If you wonder why I didn't put the centering problem in the title; I didn't want the title to be too long and it also isn't that important. — Jaïr Paalman, Apr 19 '15 at 14:12

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

This quote gives a very clear explanation about the height inheritance :

When you use a percentage value for height, it will always be relative to the specified height of the parent element. Not the actual height of the parent element, but the height specified in CSS.

So when your body element has no height specified (only min-height, but that does not count), the 100% will not be able to take effect.

https://stackoverflow.com/a/20681480/3168107

There isn't an easy fix (I definitely searched) for this that will allow minimum height but also make the elements adapt to screen overflow when using html and body without the top level having absolute dimensions. So this would be the easiest alternative :

iframe {
height: 80vh;
}

No need to set any height on either root element this way...

Another option would be to give the iframe absolute positioning. Without a positioned parent it will revert to the height of the viewport. It's basically the same effect as above but has deeper browser support (all modern browsers have been supporting it for a while though). On the other hand, not using absolute positioning is semantically more correct and gives better page flow.

Using display: table is a possibility as well because height is treated as minimum height for table elements but that would be the hackiest of the approaches.

The margin issue can be solved by setting the style to display: block or giving the parent a text-align: center. The iframe is an inline element...

http://codepen.io/anon/pen/dobdYZ?editors=110

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 19 '15 at 16:00

Shikkediel

5,195
16
45
77

I'm sorry, But your solution for the height didn't work. I used height:100%; on the html and height:100%;min-height:100%; on the body. The page doesn't strech if necessary, it behaves like I didn't set the min-height but only the height. – Jaïr Paalman Apr 19 '15 at 16:48
I've adjusted the snippet with your solution. Could you please have a look and see what's wrong? – Jaïr Paalman Apr 19 '15 at 16:58
Sure, let me see what going on. I'll update the answer. – Shikkediel Apr 19 '15 at 17:03
No problem, admittedly it's throwing me a curve ball (some of it is new to me or at least different from what I thought the behaviour was) but I've left a quick alternative fix. I'll check a bit more. – Shikkediel Apr 19 '15 at 17:25
Do you know a place where I can get an easy explanation of the viewport scale (vw and vh)? It seems to work really well. – Jaïr Paalman Apr 19 '15 at 17:44
I searched a bit and didn't find a whole lot with a good description but this looks okay : http://tinyurl.com/nsvkgg8. They're mostly useful for vertical height because a pitfall with viewport units is that they don't include scrollbars. They are relative to the *physical* viewport and not the HTML content. This is usually fine for height because there will rarely be a horizontal scrollbar. But a vertical scrollbar is often present and 100vw will be more than 100% in that case. They're great though, I use them for full page navigation. – Shikkediel Apr 19 '15 at 17:58

How do I set the height of an iframe with the min-height property in the body?

1 Answers1

Linked