I have a div with position: fixed, which contains two other divs inside: one with content and second which must always be positioned on the bottom of the main div.
Here is an example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>The problem is that footer starts to move with other content when user scrolls content of the main block, despite of position:absolute of the footer block.
Is there any way to stick footer to the bottom of the main fixed block without changing html structure?
And what if main div contains many children and only last of them is the footer which we need to stick to bottom? Example:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>