Position element at bottom of div
10,326
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>
Comments
-
pfg almost 2 years
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 toposition: absolute
, and also usingdisplay: table-cell
andvertical-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>