Question

我的网站有标准的标题，内容和页脚区域。我想要完成的是使我的iframe高度100％的容器然而，我遇到的问题是bootstrap粘性页脚工作所需的CSS。

任何想法都会很棒！

 <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

如果我理解你，请试一试。

小提琴：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;
}

与iframe和页脚组合的Bootstrap模板

1 个答案: