[Solved] Help positioning a div at the bottom of viewport.

[WonderJunky]

Hey guys

I’m trying to position a div at the bottom of the viewport.
Here is a live example:
http://famous.org/

And here’s a sketch I made to illustrate this:
http://i.imgur.com/T1i12pF.jpg

I know how to make a div occupy 100% of the viewport. I’m just having trouble positioning the “social icons/subscribe” div at the bottom. Just to clarify, I’m NOT trying to make a sticky footer. The social icons div will be at the bottom only when the page first loads.

Any help would be much appreciated. Thanks!

[WonderJunky]

It’s funny that you mention that. I was just playing around with flexbox and got it sorted out. Used a different method than the famous site though.

Two divs – The parent div is set to display: flex, and align-items: flex-end. The child div contains the content.

Thanks for the reply boss.

[Paulie_D]

I happen to have one…I’m really getting into flexbox.

http://codepen.io/Paulie-D/pen/XbONwV/

[Paulie_D]

Will have to come back to this later though …

Yeah…I’ve been inspecting famous.org and I can’t reproduce it in Codepen.

[WonderJunky]

Some fantastic solutions here. Thanks guys!

[Author]

Posts