html - 结合了 iframe 和页脚的 Bootstrap 模板

Question

我的网站有一个标准的页眉、内容和页脚区域。我想要完成的是使我的 iframe 高度达到其容器的 100% 但是，我遇到的问题是 Bootstrap 粘性页脚工作所需的 css。

任何想法都会很棒!

fiddle

 <div id="wrap">
    <div id="content">
      <iframe src="https://jsfiddle.net/" height="100%" width="100%" style="height:100%;width:100%;">    
      </iframe>
    </div>
    <div id="push">   
    </div>
  </div>
  <footer id="footer">my footer</footer>

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

#content {
  height: 100%;
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 60px;
}
#footer .container {
    border-top: 1px solid #dededd;
}

Answer 1

如果我没有正确理解您的意思，请试一试。

fiddle :https://jsfiddle.net/ex0Loy0t/2/

HTML:

  <div id="wrap">
    <div id="content">
      <iframe src="https://jsfiddle.net/" height="100%" width="100%" style="height:100%;width:100%;">    
      </iframe>
    </div>
    <div id="push">   
    </div>
  </div>
  <footer id="footer">my footer</footer>

CSS:

html,
body {
    height: 100%;
    /* The html and body elements cannot have any padding or margin. */
}

#content {
  height: 100%;
}

/* Wrapper for page content to push down footer */
#wrap {
    min-height: auto !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto 60px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 60px;
    background-color: #000;
    color: #fff;
}
#footer .container {
    border-top: 1px solid #dededd;
}