[英]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屬性無法正常工作以及如何解決？
非常感謝你！
這句話對高度繼承給出了非常清晰的解釋：
當您使用百分比值作為高度時，它將始終相對於父元素的指定高度。 不是父元素的實際高度，而是CSS中指定的高度。
因此，當您的body元素未指定高度（僅指定min-height，但不計在內）時，100％將無法生效。
https://stackoverflow.com/a/20681480/3168107
沒有一個簡單的解決方法（我肯定進行過搜索），該方法可以實現最小高度，但在使用html和body時，元素也適合屏幕溢出，而頂層沒有絕對尺寸。 因此，這將是最簡單的選擇：
iframe {
height: 80vh;
}
無需以這種方式在任一根元素上設置任何高度...
另一個選擇是給iframe絕對定位。 如果沒有放置父對象，它將還原為視口的高度。 基本上與上述效果相同，但是具有更深的瀏覽器支持（盡管所有現代瀏覽器都已經支持了一段時間）。 另一方面，在語義上不使用絕對定位會更正確，並且頁面流會更好。
使用display: table也是一種可能，因為將高度視為表元素的最小高度，但這是方法中最棘手的問題。
邊距問題可以通過將樣式設置為display: block或為父項設置text-align: center 。 iframe是一個內聯元素...
CSS，如何僅在第一頁加載時將最小高度/寬度設置為屏幕高度/寬度？
[英]CSS, How do I set the min-height/width to the screen height/width only on first page load?
我該怎么辦？ height：相對於視口；“在CSS中？
[英]How do I do “min-height: height of content; height: relative to viewport;” in CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.