max-height as percentage issues

[shaneisme]

This seems like something I can figure out, but after researching on SO and other sites I’m at a loss.

Here’s a pen: http://codepen.io/drainpip/pen/EguyB/

In Chrome it’s working as desired, taking the percentage against the upper-most parent with a declared height.

All other browsers seem to stop at the first one that doesn’t have height declared.

Problem is, I need to make the key visuals at about 60% height of the viewport so we can keep the content below it above the fold. Each image is also pretty deep inside the tree, so setting all the parents to 100%, or some arbitrary height isn’t practical.

Anyone have an idea of what I’m doing wrong, or can point me in the right direction?

[Atelierbram]

Have you tried vh?

.kv {
  max-height:60%;
  max-height:60vh;
}

[Atelierbram]

Sure, maybe it’s something for a conditional in modernizr; the thing you are describing seems almost like a classical use-case for viewport units.

[paulob]

HI,

You can’t base a percentage height on a parent that has no height set otherwise the height should default to auto (content doesn’t count as height either). Also you can’t base a child’s percentage height on a parent that has min or max height set either as it must be a real height. If the parent has a percentage height then that parent’s parent must also have a height defined and so on…

Therefore the element ‘some-other-thing’ also needs a height set for this to work.

e.g.
http://codepen.io/paulobrien/full/iyurn/

If you want nested minimum heights then use display:table with height:100% (and width:100%).

[paulob]

Could you provide an example perhaps?

I did :) The codepen I posted seems to be doing what you asked for.

http://codepen.io/paulobrien/full/iyurn/

Or did you mean something else?

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

[Author]

Posts