如何使用正文中的 min-height 属性设置 iframe 的高度？
Posted
技术标签:
【中文标题】如何使用正文中的 min-height 属性设置 iframe 的高度？【英文标题】：How do I set the height of an iframe with the min-height property in the body? 【发布时间】：2015-06-26 04:19:51 【问题描述】：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 属性不起作用以及如何修复它？
非常感谢！
【问题讨论】：
如果你想知道为什么我没有把居中问题放在标题中；我不希望标题太长，也没有那么重要。 【参考方案1】：这句话对高度继承给出了非常清楚的解释：
当你使用百分比值作为高度时，它总是相对于父元素的指定高度。不是父元素的实际高度，而是 CSS 中指定的高度。
所以当你的body元素没有指定高度时（只有最小高度，但不计算在内），100%将无法生效。
https://***.com/a/20681480/3168107
没有一个简单的解决方法（我肯定搜索过），这将允许最小高度但也使元素适应屏幕溢出时使用html 和body 而没有绝对尺寸的顶层。所以这将是最简单的选择：
iframe
height: 80vh;
无需以这种方式在任一根元素上设置任何高度...
另一个选项是给 iframe 绝对定位。如果没有定位的父级，它将恢复到视口的高度。它与上面的效果基本相同，但具有更深的浏览器支持（虽然所有现代浏览器都支持它一段时间）。另一方面，not 使用绝对定位在语义上更正确，并提供更好的页面流。
使用display: table 也是一种可能，因为高度被视为表格元素的最小高度，但这是最难的方法。
可以通过将样式设置为display: block 或给父级设置text-align: center 来解决边距问题。 iframe 是一个内联元素...
http://codepen.io/anon/pen/dobdYZ?editors=110
【讨论】：
很抱歉，您的高度解决方案不起作用。我用了身高：100%；关于 html 和 height:100%;min-height:100%;在身体上。如果需要，页面不会拉伸，它的行为就像我没有设置最小高度而只设置高度。 我已经用你的解决方案调整了 sn-p。你能看看有什么问题吗？ 当然，让我看看发生了什么。我会更新答案。 没问题，诚然，它给我扔了一个曲线球（其中一些对我来说是新的，或者至少与我认为的行为不同），但我留下了一个快速的替代解决方案。我再检查一下。 你知道哪里可以简单地解释视口比例（vw 和 vh）吗？它似乎工作得很好。以上是关于如何使用正文中的 min-height 属性设置 iframe 的高度？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 ejabberd 中的 xmpp 消息正文中附加自定义数据
如何清理 Node.js 和 Typescript 中的响应正文
删除额外的正文参数或将 WebGetAttribute/WebInvokeAttribute 上的 BodyStyle 属性设置为 Wrapped