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

Question

I'm looking for a way to make a div sticky to the bottom, like a footer, but inside a bootstrap grid, so not over the whole width.

Bootstrap has an example of a sticky footer , I tried to tweak it to make it work in my case but couldn't.

This is another approach, but also assumes your sticky div is not nested inside another div.

Below is my code, I need to make .app-footer sticky to the bottom over the width of it's parent 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>

Edit: the CSS I've tried but doesn't work:

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

Edit: Ok, got it. The solution seems to be to add {position: relative; height: 100%} to ALL parent divs. In my case I had the grid wrapped in <div class="row"> , when I added it there too it worked.

Answer 1

if you want to make the nested child div positioned to the bottom of the parent div:

add {position:relative} to the css of the the parent div; add {position:absolute;bottom:0} to the css of the the child div;

the nested div should be the same width as the parent (taknig into account the padding and margins), but you could force it to be by adding width:100% to the child div's css

Answer 2

You could try this in your CSS:

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

Answer 3

Use this css to make your app-footer div sticky:

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