在引导网格中制作一个粘性 div

Question

我正在寻找一种方法来使div粘在底部，就像页脚一样，但在引导网格内，所以不是在整个宽度上。

Bootstrap 有一个粘性页脚的例子，我试图调整它以使它在我的情况下工作，但不能。

这是另一种方法，但也假设您的粘性div 没有嵌套在另一个div 中。

下面是我的代码，我需要使.app-footer在其父div 的宽度上粘在底部。

<div class="row main">
  <div class="col-xs-2 col-md-4 col-lg-5">...</div>
  <div class="col-xs-8 col-md-4 col-lg-2">
    <div class="app"></div>
    <div class="app-footer"></div>
  </div>
  <div class="col-xs-2 col-md-4 col-lg-5">...</div>
</div>

编辑：我尝试过但不起作用的CSS：

html,
body {
  height: 100%;
}
/* Wrapper for page content to push down footer */
.app {
  min-height: 100%;
  height: auto;
  /* Negative indent footer by its height */
  margin: 0 auto -60px;
  /* Pad bottom by footer height */
  padding: 0 0 60px;
}
/* Set the fixed height of the footer here */
.app-footer {
  height: 60px;
  background-color: #f5f5f5;
}

编辑：好的，知道了。解决方案似乎是将 {位置：相对; 高度：100%} 添加到所有父div。就我而言，我将网格包裹在<div class="row">中，当我将其添加到那里时，它也起作用了。

Answer 1

如果要将嵌套的子div 定位到父div 的底部：

将 {位置：相对} 添加到父div 的 CSS 中;将 {位置：绝对;底部：0} 添加到子div 的 CSS 中;

嵌套的div 应该与父级的宽度相同（考虑到填充和边距），但您可以通过将 width：100% 添加到子div 的 CSS 中来强制它

Answer 2

使用此 css 使您的应用程序页脚div 具有粘性：

.app-footer {
  height: 60px;
  background-color: #f5f5f5;
  position: fixed;
  bottom:0px;
  left:0px;
}

Answer 3

你可以在CSS中试试这个：

.app-footer{
  position: absoute;
  bottom: 0px
  width: 100%;
  height: 80px;
  background-color: red;
}