在单页面应用程序中将页脚设置为底部

Question

我正在尝试创建单页应用程序。

html内容：

<div class="containerDiv">
  <div class="headerDiv"></div>
  <div class="contentDiv"></div>
  <div class="footerDiv"></div>
</div>

我的所有应用程序内容都将与ng-view一起进入contentDiv。

css内容：

.containerDiv {
position: relative;
min-height: 100%;
background-color: beige;
}

.headerDiv {
height: 60px;
background: black;
width: 100%;
}

.contentDiv {
padding-bottom: 60px;
}

.footerDiv {
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
width: 100%;
height: 60px;
}

当内容高度增加时，一切正常，非定位元素和页脚停留在底部。

我想根据我的要求在contentDiv中添加定位元素（绝对或相对）。

当我定位元素的高度增加时，它会打破我的页面，因为页脚保持在相同的位置，元素会覆盖它。

假设我想在contentDiv中添加一个表

<div class="data">
   <table>
   </table>
</div>

我想在html中的特定位置对齐表格。

.data{
 position:absolute/relative;
 top: 300px;
 left: 400px;
}

如果桌子的高度增加，它将超出页脚范围。 表格的高度是动态的。

Answer 1

不确定你在这里想要达到的目的。
如果您希望页脚始终贴在页面底部，例如“漂浮”在页面内容上，则需要在CSS中将footerDiv的位置设置为fixed。

JsFiddle example for fixed position

如果您希望页脚不会溢出任何内容，则可以将position设置为relative，因为它已经位于容器布局的底部。

JsFiddle example for relative position

将the duplicated question的答案应用到您的案例中，这是粘性页脚的另一种解决方案，而不是fixed

JsFiddle example for sticky footer w/o fixed