iframe与页脚和scrollabe内容

时间：2016-06-21 10:46:21

标签： javascript html css twitter-bootstrap iframe

我有iframe中的aspx页面。

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

enter image description here

所以在页面上我有：

＆＃13;
＆＃13; 
/* 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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

2 个答案:

答案 0 :(得分：0)

我检查了你的代码，检查内联的代码。请试试。

<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>

答案 1 :(得分：0)

使用固定页脚实现可滚动内容的方法有很多种。

以下是3种可能的解决方案。

方法1：使用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>

方法2：使用绝对定位+ 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>

相关问题
最新问题