Trouble with min-height: 100%

[Koopa]

Hey guys,

I’m messing around with an mobile design pattern with an off canvas menu. I want to #main div with the content to be min-height: 100%;

I can’t figure it out how to fix that. It just drives me crazy -.-

http://codepen.io/Koopax/full/ofvaB

I hope you can help me somehow

Many thanks

Koopa

[paulob]

Hi,

To use a percentage min-height you need to have a parent that has a height defined and not one that has a min-height or height defined by content.

This usually means setting html,body to height:100% and then the first non nested element on the page can be min-height:100% and stretch from bottom to top.

It gets awkward if you have headers/footers etc because they will need to be inside that first element otherwise you will get 100% height + the height of elements outside that context resulting in too much height. (There are many tricks to offset this height but do complicate matters).

Here is a quick and dirty demo showing the structure to get a 100% height on the main content.

http://cdpn.io/AjFca

Hope it helps.

[Koopa]

Thanks for your answer :)

I was actually trying to achieve this without changing the markup. It was just a kind of practice to find a good way to fix this recurring issue.

However I see that this hole thing depends a lot on the page structure.

Thank you again and Merry Christmas :)

[Author]

Posts