如何在body中設置min-height屬性來設置iframe的高度？

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屬性不工作，以及如何解決它？

非常感謝！

來源

2015-04-19 Jaïr Paalman

如果您想知道爲什麼我沒有在標題中放置居中問題;我不希望標題太長，也不是那麼重要。 –

這句話給出了關於高度繼承了非常明確的解釋：

當您使用高度的百分比值，它永遠是相對父元素的指定高度。不是父元素的實際高度，而是CSS中指定的高度。

所以，當你的身體元素沒有指定高度（只有最小高度，但不計算），100％將無法生效。

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

沒有一個簡單的辦法（我絕對搜索）這將允許最小高度也會使元素適應屏幕溢出使用html和body時無需絕對頂級尺寸。因此，這將是最簡單的選擇：

iframe { 
height: 80vh; 
}

不需要設置任何根元素這種方式在任何高度...

另一種辦法是給iframe的絕對定位。沒有定位的父級，它將恢復到視口的高度。它基本上與上述效果相同，但具有更深的瀏覽器支持（所有現代瀏覽器都支持它一段時間）。另一方面，使用絕對定位的而不是在語義上更加正確，並且提供更好的頁面流。

使用display: table也是一種可能性，因爲高度被視爲表格元素的最小高度，但這將是這些方法中最黑的。

保證金問題可以通過將樣式設置爲display: block或給父母text-align: center來解決。 iframe是一個內聯元素...

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

來源

2015-04-19 16:00:17 Shikkediel

對不起，但您的高度解決方案不起作用。我用身高：100％;在html和高度：100％;最小高度：100％;在身體上。如果需要，頁面不會伸展，它的行爲就像我沒有設置最小高度但只設置高度。 –

我已使用您的解決方案調整了代碼段。你可以看一看，看看有什麼不對嗎？ –

當然，讓我看看發生了什麼。我會更新答案。 – Shikkediel

如何在body中設置min-height屬性來設置iframe的高度？

回答

相關問題