Question

我正在寻找一种方法让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;高度：100％}到所有父div。在我的情况下，我将网格包裹在<div class="row">中，当我在那里添加网格时也是如此。

Answer 1

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

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

嵌套div的宽度应与父级相同（taknig考虑填充和边距），但您可以通过向子div添加宽度：100％来强制它;

Answer 2

您可以在CSS中尝试：

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

Answer 3

使用此css使您的app-footer div粘贴：

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

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

3 个答案: