Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Column Layout with Inline-Block

height 100% doesn't make footer to go bottom?

height: 100% doesn't do anything to my page... It it not moving footer to the bottom. Any idea why this is doing this?

Gunhoo Yoon
Gunhoo Yoon
5,027 Points

I don't know where you are doing height 100% but if you are doing it to footer that's not a good idea to send footer to bottom and it won't work. First the reason why footer height 100% doesn't work is probably you haven't declared explicit height value to parent element, percentage needs some sort of base context to work. Even if you managed to get the height 100% on footer it will only send it to top while using extra empty space to bottom.

If you want to position footer always to be at bottom, try positioning it to absolute then send it to bottom by setting positional property.

2 Answers

John Moya
John Moya
17,963 Points

Bumsu for example if you want to make the footer to appear as Last Item you must put it as last or use flexbox and order

Link to Box Model

[Important] Read the comments to understand

http://codepen.io/anon/pen/zvBLdK

In Flexbox It doesn't matter the order as they are in the same flex container (context) [Flex-Box Container {Item}{Item}{Item}{Item}]

Flex-Box Example

http://codepen.io/anon/pen/jbrpxO

Good Luck and Greetings from Costa Rica