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

问题

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!

回答1:

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

来源：https://stackoverflow.com/questions/29730977/how-do-i-set-the-height-of-an-iframe-with-the-min-height-property-in-the-body

标签

html

css

iframe

height

center