Reply To: max-height as percentage issues

[paulob]

Hi,

You referred to using display:table as an alternative to nesting the heights?

Ok, what I was thinking doesn’t seem to work well with Firefox. There seems to be a bit of a bug with Firefox with that method but you would still need to set heights anyway.

The codepen above seems to be doing what you required in Chrome and Firefox but of course it all does depend on what you want to do next.

Is it not working like you envisaged? You said your version was working in Chrome and the version I posted works in the same manner as yours in both Chrome and Firefox. I may be misunderstanding what you want to accomplish though.

The only way to set a percentage height is for the parent’s height to be set also and so on all the way backup the tree. That’s just the way that percentage height works. Also setting a 100% height of the viewport means that you can only use it on elements that are at the top of the viewport to start with otherwise you would get 100% height plus the distance from the top.