Position element at bottom of div

Question

Does anyone know a way to have a footer stuck to the bottom of a div like a position: fixed element. The methods I've found all stick it at the bottom of the starting view or at the bottom so you have to scroll all the way down to see them.

I have tried setting the parent to position:relative and the child to position: absolute, and also using display: table-cell and vertical-align: bottom, but neither keep it stuck in place as you scroll, instead they leave it static at the bottom of the div or at the bottom of the default view.

.a{
  position:relative;
  background-color:#ccc;
  width:500px;
  min-height: 150px;
  max-height: 150px;
  overflow-y: scroll;
  float:left;
  padding:8px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:#666;
  color:#fff;
}

<div class="a">
    Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
    <div class="footer">Some text</div>
</div>

Possible duplicate of [HTML/CSS positioning "float: bottom"](http://stackoverflow.com/questions/526035/html-css-positioning-float-bottom) or http://stackoverflow.com/questions/15358646/css-position-div-to-bottom-of-containing-div — Rob, Nov 10 '15 at 01:03
it isn't, the answers for that don't show locking the item to the bottom of the div — pfg, Nov 10 '15 at 01:05
It sort of is. Its really the only effective way of doing it. — Shaun, Nov 10 '15 at 01:12
I don't think it is a duplicate; it's related, but the OP's question is a bit more specific since his element `overflow: scroll`. Also, the solution is different. — justinw, Nov 10 '15 at 01:26

score 8 · Accepted Answer · answered Nov 10 '15 at 01:11

You can't really, not the way you want to, and you'd need to use jquery to keep moving the position.

What you can do, which is the easiest solution, is to have a container wrapping the entire area.

.outer {
    position:relative;
    width:500px;
}

.a{
  background-color:#ccc;
  min-height: 150px;
  max-height: 150px;
  overflow-y: scroll;
  padding:8px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  background-color:#666;
  color:#fff;
}

  <div class="outer">
    <div class="a">
       Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
    </div>
    <div class="footer">Some text</div>
  </div>

Trying to modify my markup and styling to allow that. The first thing I tried was that, but I was unable to move the footer out of the a without it breaking a ton of styling. — pfg, Nov 10 '15 at 01:22

justinw · Answer 2 · 2015-11-10T01:30:07.757

The issue here is that you can't use position: fixed on an element (only works on viewport), but you want the footer element to sit in a fixed position relative to it's parent.

You can do that by wrapping the scrollable div and setting the footer to the bottom of that wrap element. Since the wrap doesn't scroll (the element inside of it does), the footer won't move when you scroll.

See this fiddle.

html, body {
    margin: 0;
    padding: 0;
}

.wrap {
    background-color:#ccc;
    position: relative;
}

.a {
  height: 150px;
  overflow-y: scroll;
}

.b {
    margin-top: 300px;
    padding-bottom: 20px;
}

.footer{
  position:absolute;
  bottom:0;
  left:0;
  background-color:#666;
  color:#fff;
    width: 100%;
}

<div class="wrap">
    <div class="a">
        top
        <div class="b">bottom</div>
    </div>
    <div class="footer">Some text</div>
</div>

Position element at bottom of div

2 Answers2

Linked