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
bumsu kim
5,578 Pointsheight 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?
2 Answers
John Moya
17,963 PointsBumsu 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
Sam Donald
36,305 Pointsshow code
Gunhoo Yoon
5,027 PointsGunhoo Yoon
5,027 PointsI 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.