在引导网格中创建一个粘性 div答案

【问题标题】：Make a sticky div in a bootstrap grid在引导网格中创建一个粘性 div
【发布时间】：2016-06-07 17:04:03
【问题描述】：

我正在寻找一种方法让 div 像页脚一样粘在底部，但在引导网格内，所以不会覆盖整个宽度。

Bootstrap has an example of a sticky footer，我尝试对其进行调整以使其适用于我的情况，但不能。

This 是另一种方法，但也假设您的粘性 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;
}

编辑：好的，知道了。解决方案似乎是添加 {position: relative; height: 100%} 到所有父 div。在我的情况下，我将网格包裹在 <div class="row"> 中，当我在那里添加它时它也起作用了。

【问题讨论】：

您希望它粘在窗口底部还是父元素底部？

标签： html css twitter-bootstrap

【解决方案1】：

你可以在你的 CSS 中试试这个：

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

【讨论】：

【解决方案2】：

如果你想让嵌套的子 div 位于父 div 的底部：

将 {position:relative} 添加到父 div 的 css；将 {position:absolute;bottom:0} 添加到子 div 的 css 中；

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

【讨论】：

【解决方案3】：

使用此 css 使您的 app-footer div 具有粘性：

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

【讨论】：