The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble with min-height: 100%

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #159036

    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 -.-

    I hope you can help me somehow

    Many thanks




    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.

    Hope it helps.


    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 :)

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.