如何使用主体的min-height属性设置iframe的高度？ [英] 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>
我已经将iframe的高度设置为80％，但不起作用。当身体的高度设置为100％时，它确实起作用了，但是我现在使用的是最小高度，因此出现了这个问题。另外，我无法使用margin-left和margin-right：auto;使iframe居中。有谁知道为什么CSS属性无法正常工作以及如何解决？
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?
非常感谢！
推荐答案
该引号对高度继承给出了非常清晰的解释：
This quote gives a very clear explanation about the height inheritance :
当您使用百分比值表示高度时，它总是相对于父元素的指定高度。不是父元素的实际高度，而是CSS中指定的高度。
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.
因此，当您的body元素未指定高度（仅min-height，但不计在内）时， 100％无法生效。
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
对此没有一个简单的解决方法（我绝对搜索过），该方法可以实现最小高度，但也可以使元素在使用 html 和 body 而顶部没有绝对尺寸的情况下适应屏幕溢出。因此，这将是最简单的替代方法：
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...
另一个选择是给iframe绝对定位。如果没有定位的父对象，它将还原为视口的高度。基本上与上述效果相同，但具有更深的浏览器支持（尽管所有现代浏览器都已经支持了一段时间）。另一方面，使用绝对定位的 not 在语义上更正确，并且可以提供更好的页面流。
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.
使用 display：table 也有可能，因为将高度视为表格元素的最小高度，但这将是方法中最棘手的问题。
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.
可以通过设置样式来解决保证金问题到 display：block 或为父母提供 text-align：center 。 iframe是一个内联元素...
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
这篇关于如何使用主体的min-height属性设置iframe的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
