2

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>

4
  • 1
    Possible duplicate of HTML/CSS positioning "float: bottom" or stackoverflow.com/questions/15358646/…
    – Rob
    Nov 10, 2015 at 1:03
  • it isn't, the answers for that don't show locking the item to the bottom of the div
    – pfg
    Nov 10, 2015 at 1:05
  • It sort of is. Its really the only effective way of doing it.
    – Shaun
    Nov 10, 2015 at 1: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, 2015 at 1:26

2 Answers 2

8

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>
1
  • 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, 2015 at 1:22
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.