HTML: Anchor block element inside bottom of parent block?

recursive_44743 0
Viewed 43957

Is there a cross browser method of attaching some content in a <div> to the bottom? One difficulty is that the <div> may have an arbitrary height applied, but I want certain content to be stuck to the bottom of it at all times.

This would have been accomplished in the bad old days like this:

<table style="height: foo;">
    <tr><td valign="top">content</td></tr>
    <tr><td valign="bottom">stuck to the bottom</td></tr>
</table>

Can I do this without resorting to this technique?

layout css html
2 Answers

Just had the same issue but this solution didn't fix as the child didn't stretch the full width of the parent.

I solved by using flex to make child2 stick to the bottom of parent:

<div id="parent">
    <div id="child1"></div>
    <div id="child2"></div>
</div>

#parent {
  display: flex;
  flex-direction: column;
}
#child1 {
  flex-grow: 1;
}
user_89398110
Related