align contents to bottom of div without using position:absolute - html

Question

hey there is there a way i can align the contents of a div tag to the bottom without using position:absolute. almost all other solutions on the internet uses position:absolute and/or vertical-align:bottom, but is there a way to do this without using position:absolute , let's say for example how do i align the cat in the image to the bottom of the div in this fiddle thanks!
the other solution i was thinking of was filling up the empty space at the top so that the image gets pushed down to the bottom but i also have no clue on how to do that either.
P.S. Please don't suggest using tables in the div, if that's possible.

Answer 1

You could try something like
<div style="border:1px solid black; height:100px; display:table; width:100%;">
<div style="display:table-cell; vertical-align: bottom;">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" />
</div>
</div>

Answer 2

You can use flexbox to solve this problem: http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 3

Demo
html
<div class="content">Content</div>
<div class="footerLike">
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
css
.content {
height:calc(100% - 102px); /* 100% - height of footer - borders */
}
.footerLike {
border:1px solid black;
height:100px;
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}
Demo, as said in comments
<div class="footerLike">
<div class="dummy"><!-- you can put anything here --></div>
<img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>
.footerLike {
border:1px solid black;
height:100%;
}
img {
height: 100%;
display: block;
}
.dummy {
height: calc(100% - 100px);
}
body, html {
height: 100%;
width: 100%;
margin:0;
padding:0;
}