带有页脚和可滚动内容的 iframe答案

【问题标题】：Iframe with footer and scrollabe content带有页脚和可滚动内容的 iframe
【发布时间】：2016-06-21 10:46:21
【问题描述】：

我有 iframe 中的 aspx 页面。

我需要将此页面上的按钮添加到页脚并使其内容可滚动（所有内容都在 table 内）。

所以在页面上我有：

/* Buttons Footer*/
.full-scrollable-height {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

form.form-full-height {
	height: 83%;
	overflow: hidden;
	margin: 0;
}

	form.form-full-height .footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		/* Set the fixed height of the footer here */
		height: 50px;
		background-color: #ffffff;
		/*padding-top: 15px;*/
		/*border-top: 1px solid #B7B7B7;*/
	}
/* End Footer*/

td{height:30px;border: 1px solid red;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div style="height:200px">
<form class="form-full-height">
  <div class="full-scrollable-height">
    <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      </table>
  </div>
  <footer class="footer">
		  <div class="container">
			<div class="col-xs-12">
				<div class="pull-left">
					<a class="btn btn-default" href="#">Save Template</a>
					<a class="btn btn-default" href="#">Load Template</a>
				</div>
				<div class="pull-right">
					<a href="#" class="btn btn-primary">Save</a>
					<a href="#" class="btn btn-primary">Cancel</a>
				</div>
			</div>
		  </div>
		</footer>
</form>
</div>

问题：这种方法好吗？我的意思是为 table-wrap div 设置高度？我可以以某种方式跳过这是我知道 iframe 的高度吗？

我可以在页脚中间设置按钮吗（垂直对齐：中间在这里不起作用，如果让页脚inline-block 看起来很糟糕）

【问题讨论】：

那么 iframe 在哪里？
@Midas，我所有的表单都在 iframe 中。我认为没有必要在代码中添加iframe。
我可以跳过这是我知道 iframe 的高度吗？ - 你能澄清一下吗？
@Midas 我设置了表格包装的高度。我不想不这样做。所以我问是否有一些解决方案可以避免它

标签： javascript html css twitter-bootstrap iframe

【解决方案1】：

有很多方法可以实现带有固定页脚的可滚动内容。

这里有 3 种可能的解决方案。

方法一：使用弹性盒

html, body, form {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.full-scrollable-height {
  flex: 1 1 auto;
  overflow-y: auto;
  border-bottom: 1px solid silver;
}
table {
  width: 100%;
}
footer .container {
  padding: 15px 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-full-height">
  <div class="full-scrollable-height">
    <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </table>
  </div>
  <footer class="footer">
    <div class="container">
      <div class="col-xs-12">
        <div class="pull-left">
          <a class="btn btn-default" href="#">Save Template</a>
          <a class="btn btn-default" href="#">Load Template</a>
        </div>
        <div class="pull-right">
          <a href="#" class="btn btn-primary">Save</a>
          <a href="#" class="btn btn-primary">Cancel</a>
        </div>
      </div>
    </div>
  </footer>
</form>

方法二：使用绝对定位+Javascript

window.onload = function() { // Better is to use the DOM ready event here
  var form = document.forms[0];
  var content = form.getElementsByClassName('full-scrollable-height')[0];
  var footer = form.getElementsByTagName('footer')[0];

  footer.style.position = 'absolute';
  footer.style.bottom = 0;

  (window.onresize = function() {
    var height = form.offsetHeight - footer.offsetHeight;
    content.style.height = height + 'px';
  })();
};

html, body, form {
  height: 100%;
}
.full-scrollable-height {
  overflow-y: auto;
}
table, footer {
  width: 100%;
}
footer {
  border-top: 1px solid silver
}
footer .container {
  padding: 15px 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<form class="form-full-height">
  <div class="full-scrollable-height">
    <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </table>
  </div>
  <footer class="footer">
    <div class="container">
      <div class="col-xs-12">
        <div class="pull-left">
          <a class="btn btn-default" href="#">Save Template</a>
          <a class="btn btn-default" href="#">Load Template</a>
        </div>
        <div class="pull-right">
          <a href="#" class="btn btn-primary">Save</a>
          <a href="#" class="btn btn-primary">Cancel</a>
        </div>
      </div>
    </div>
  </footer>
</form>

方法3：在页脚使用固定位置

table {
  width: 100%;
}
footer .container {
  padding: 15px 0
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: white;
  border-top: 1px solid silver
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<form class="form-full-height">
  <div class="full-scrollable-height">
    <table>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
      <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
      </tr>
    </table>
  </div>
  <footer class="footer">
    <div class="container">
      <div class="col-xs-12">
        <div class="pull-left">
          <a class="btn btn-default" href="#">Save Template</a>
          <a class="btn btn-default" href="#">Load Template</a>
        </div>
        <div class="pull-right">
          <a href="#" class="btn btn-primary">Save</a>
          <a href="#" class="btn btn-primary">Cancel</a>
        </div>
      </div>
    </div>
  </footer>
</form>

【讨论】：

【解决方案2】：

我检查了你的代码，为了检查内联代码的目的。请试试这个。

<style>
table {
    width: 100%;
}
form.form-full-height .footer {
    background-color: #000000;
    bottom: 0;
    height: 50px;
    left: 0;
    position: absolute;
    width: 100%;
}
</style>

内嵌 css 的 HTML：

  <footer class="footer">
          <div class="container" style="position: relative; height: 100%;">
            <div class="col-xs-12" style="clear: both ! important; vertical-align: middle ! important; height: 100%; display: table;">

  <div class="" style="display: table-cell; margin: auto ! important; vertical-align: middle ! important; height: 100% ! important;">
         <div class="pull-left">
                    <a href="#" class="btn btn-default">Save Template</a>
                    <a href="#" class="btn btn-default">Load Template</a>
                </div>
                <div class="pull-right">
                    <a class="btn btn-primary" href="#">Save</a>
                    <a class="btn btn-primary" href="#">Cancel</a>
        </div>
  </div>

【讨论】：