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 属性不起作用以及如何修复它？
非常感谢!
最佳答案
这句话对高度继承给出了非常清楚的解释:
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
没有一个简单的修复方法(我肯定搜索过)，它允许最小高度，但也使元素在使用 html 和 body 时适应屏幕溢出顶层没有绝对尺寸。所以这将是最简单的选择:
iframe {
height: 80vh;
}
无需在任何根元素上以这种方式设置任何高度...
另一种选择是为 iframe 提供绝对定位。如果没有定位的父级，它将恢复到视口(viewport)的高度。它与上面的效果基本相同，但具有更深入的浏览器支持(尽管所有现代浏览器已经支持它一段时间了)。另一方面，不使用绝对定位在语义上更正确并且提供更好的页面流。
使用 display: table 也是一种可能，因为高度被视为表格元素的最小高度，但这是最 hackiest 的方法。
边距问题可以通过将样式设置为display: block 或给parent一个text-align: center来解决。 iframe 是一个内联元素...
关于html - 如何在正文中使用 min-height 属性设置 iframe 的高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29730977/