javascript - 带有页脚和可滚动内容的 iframe

我有一个位于 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 的高度，我能以某种方式跳过吗？

我可以在页脚中间设置按钮吗(vertical-align : middle 在这里不起作用，如果让页脚 inline-block 看起来很糟糕)

最佳答案

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

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

方法一:使用flexbox

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>

方法三:在页脚上使用固定位置

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>

关于javascript - 带有页脚和可滚动内容的 iframe，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37942319/

javascript - 带有页脚和可滚动内容的 iframe

上一篇：javascript - 我的 javascript 适用于 google maps API 吗？

下一篇：javascript - 背景视频禁用链接