如何使用body的min-height属性设置iframe的高度？

Question

如何使用body的min-height属性设置iframe的高度？

5

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属性不起作用以及如何解决吗？

非常感谢！

- Jaïr Paalman

如果你想知道为什么我没有在标题中提到居中问题；我不想让标题太长，而且这个问题也不是很重要。 - Jaïr Paalman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shikkediel · Accepted Answer

这个引用非常清晰地解释了高度继承：

当您使用百分比值作为高度时，它将始终相对于父元素指定的高度。不是父元素的实际高度，而是在CSS中指定的高度。

因此，当您的body元素没有指定高度（仅有min-height，但这不计算），100％将无法生效。

https://dev59.com/JWIj5IYBdhLWcg3wERJx#20681480

针对这个问题，没有简单的解决方案（我确实搜索过），可以允许最小高度，同时在使用html和body时使元素适应屏幕溢出，而不需要顶级具有绝对尺寸。因此，以下是最简单的替代方案：

iframe {
height: 80vh;
}

不需要在根元素上设置任何高度，这样做...

另一个选项是给iframe绝对定位。如果没有定位的父元素，它将恢复到视口的高度。它基本上与上面的效果相同，但具有更深层次的浏览器支持（尽管所有现代浏览器都已经支持它一段时间了）。另一方面，不使用绝对定位在语义上更正确，并且可以获得更好的页面流程。

使用display: table也是一种可能性，因为高度被视为表元素的最小高度，但这将是最hacky的方法之一。

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

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