如何设置与体内分钟-height属性的iframe的高度?(How do I set the hei

2019-10-22 17:10发布

 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%,但现在我使用的最小高度和这个问题的发展。 另外,我可以用利润率左缘和右不居中的iframe:汽车;. 有谁知道为什么CSS属性不工作,如何解决?

非常感谢你!

Answer 1:

这句话给出了关于高度继承了非常明确的解释:

当您使用高度的百分比值,它永远是相对父元素的指定高度。 不是父元素的实际高度,但是在CSS中指定的高度。

所以,当你的身体元素没有指定的高度(只有最小高度,但不计),100%将无法生效。

https://stackoverflow.com/a/20681480/3168107

没有一个简单的办法(我绝对搜索)这将允许最小高度也会使元素使用时适应屏幕溢出htmlbody ,而不必绝对尺寸顶层。 因此,这将是最简单的选择:

iframe {
height: 80vh;
}

无需设置任何高度或者根元素在这条路上...

另一种办法是给iframe的绝对定位。 如果没有定位的父,将恢复为视口的高度。 它基本上与上述相同的效果,但有较深的浏览器支持(所有现代浏览器一直支持了一段时间,虽然)。 在另一方面, 使用绝对定位在语义上更正确,更提供了更好的页面流。

使用display: table这样的可能性,以及由于高度被当作表元素的最小高度,但这将是hackiest的方法的。

保证金问题可以通过样式设置要解决display: block或给父母一个text-align: center 。 IFrame,这是一个内联元素...

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



文章来源: How do I set the height of an iframe with the min-height property in the body?