title: How do I set the height of an iframe with the min-height property in the body?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;
              Foto's
          &lt;/title&gt;
          &lt;link rel="icon" type="image/png" href="files/icon.png"&gt;
          &lt;link rel="stylesheet" href="style.css"&gt;
          &lt;script src="files/javascript.js"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body onload="start()"&gt;
          &lt;br&gt;
          &lt;div id="menu"&gt;
              &lt;p style="font-size:20px;"&gt;
                  &lt;a href="index.html"&gt;
                      Welkom
                  &lt;/a&gt;&lt;a href="agenda.html"&gt;
                      Agenda
                  &lt;/a&gt;&lt;a href="fotos.html"&gt;
                      Foto's
                  &lt;/a&gt;&lt;a href="contact.html"&gt;
                      Contact
                  &lt;/a&gt;
              &lt;/p&gt;
              &lt;p style="font-size:16px;"&gt;
                  &lt;a onclick="go('camera/1993-1994.html', this)"&gt;
                      1993-1994
                  &lt;/a&gt;&lt;a onclick="go('camera/1994-2003.html', this)"&gt;
                      1994-2003
                  &lt;/a&gt;&lt;a onclick="go('camera/2003-2004.html', this)"&gt;
                      2003-2004
                  &lt;/a&gt;&lt;a onclick="go('camera/2005-2006.html', this)"&gt;
                      2005-2006
                  &lt;/a&gt;&lt;a onclick="go('camera/2006-2007.html', this)"&gt;
                      2006-2007
                  &lt;/a&gt;&lt;a onclick="go('camera/2007-2008.html', this)"&gt;
                      2007-2008
                  &lt;/a&gt;&lt;a onclick="go('camera/2008-2009.html', this)"&gt;
                      2008-2009
                  &lt;/a&gt;&lt;a onclick="go('camera/2009-2010.html', this)"&gt;
                      2009-2010
                  &lt;/a&gt;&lt;a onclick="go('camera/2011-2012.html', this)"&gt;
                      2011-2012
                  &lt;/a&gt;&lt;a onclick="go('camera/2013-2014.html', this)"&gt;
                      2013-2014
                  &lt;/a&gt;&lt;a onclick="go('camera/2014-2015.html', this)" id="one"&gt;
                      2014-2015
                  &lt;/a&gt;
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;iframe id="iframe"&gt;
          &lt;/iframe&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I've set the height of the iframe to 80% but it doesn't work. It did work when the height of the body was set to 100% but I'm now using min-height and this problem developed. Also, I can't center the iframe using margin-left and margin-right:auto;. Does anyone know why the CSS properties are not working and how to fix it?</p>
  
  <p>Thank you very much!</p>