如何在正文中使用最小高度属性设置 iframe 的高度？

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>

我已经将 iframe 的高度设置为 80%，但它不起作用。当 body 的高度设置为 100% 时它确实有效，但我现在使用 min-height 并且出现了这个问题。另外，我无法使用 margin-left 和 margin-right:auto; 将 iframe 居中。有谁知道为什么 CSS 属性不起作用以及如何修复它？

非常感谢！

Answer 1

这句话对高度继承给出了非常清晰的解释：

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.

没有一个简单的解决方法（我肯定搜索过），它允许最小高度，但也使元素在使用没有顶层的 html 和 body 时适应屏幕溢出具有绝对尺寸。所以这将是最简单的选择：

iframe {
height: 80vh;
}

无需在任何根元素上以这种方式设置任何高度...

另一种选择是为 iframe 提供绝对定位。如果没有定位的父级，它将恢复到视口的高度。它与上面的效果基本相同，但具有更深入的浏览器支持（尽管所有现代浏览器已经支持它一段时间了）。另一方面，not 使用绝对定位在语义上更正确并且提供更好的页面流。

也可以使用 display: table，因为高度被视为 table 元素的最小高度，但那将是最 hackiest 的方法。

边距问题可以通过将样式设置为display: block或者给parent一个text-align: center来解决。 iframe 是一个内联元素...

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

如何在正文中使用最小高度 属性 设置 iframe 的高度？

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

html

css

iframe

height

center

如何在正文中使用最小高度属性设置 iframe 的高度？