CODEWITHSUNDEEP
htmlcsscss-position
pfg
pfg

Reputation: 3573

Position element at bottom of div

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>

Upvotes: 2

Views: 12440

Answers (2)

justinw
justinw

Reputation: 3976

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>

Upvotes: 0

Shaun
Shaun

Reputation: 927

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>

Upvotes: 8

Related Questions