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

CSS

Posted by erez sason
erez sason
802 Points

The css propery "max-height" is not applied on element when using relative size

Why hen I use max-height: 20% -as precents, is not applied on the element, but - max-height: 100px -as pixels is working fine ?

  • It does so with any value of precents or pixels
  • I did some tests and noticed that the problem is only with "max-height". when I use "max-width" there is no problem
  • I did the tests on firefox

Example:

<!DOCTYPE html> <html> <head>

<style> #gallery{ margin: 0; padding: 0; }

#gallery li{
    float: left;
    width: 45%;
    padding: 2.5%;
}

#gallery li img{
    max-height: 20%;      /* <-- here */
}

</style>

</head> <body> <div id="gallery"> <ul> <li> <img src="http://www.angel-hare.com/acorn/tta/Buster_eh_s2.gif" alt=""/> </li> <li> <img src="http://i.somethingawful.com/u/raptorred/tiny_toons/wecangohomenow.jpg" alt=""/> </li> <li> <img src="http://fc02.deviantart.net/fs5/i/2004/316/d/5/Tiny_Toon_by_TMS__by_Atariboy2600.jpg" alt=""/> </li> </ul> </div> </body> </html>

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Hi Erez.

I thought this was straight too so I did a little research and it looks like a percentage height doesn't work on an element that doesn't already have an explicit height set. It looks like what you;'re seeing happening is the value is defaulting to an auto; value. https://css-tricks.com/forums/topic/max-height-as-percentage-issues/ Try setting an appropriate height for the element as minimum height that way you'll always have an element taking up a minimum of the space it needs.

erez sason
erez sason
802 Points

I read the post you suggested. The problem is on firefox. The solution there is to use vh units instead of precents (max-height: 20vh)

I didn't understand succeed to solve it with min-height. The goal is to have all the images in the gallery in the same max-height, and it should be relative to the browser window area.

How do you suggest to write the code?

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

You could set a height (as your maximum desired image height relative to the window) for the parent element, then set the percentage height to 100% for the image itself to fill the li.

#gallery li{
    float: left;
    height: 20vh;
    padding: 2.5%;
}

#gallery li img{
    height: 100%;
}
erez sason
erez sason
802 Points

Right. This solution is nice, and similar to the last one because it's use the vh units again. It still strange that width can be with percentage while height can't.

Matt Brock
Matt Brock
28,330 Points
Matt Brock
Matt Brock
28,330 Points

Yea that is strange.. I think it just depends on the parent element. Have you tried simply adding:

    height: 100%;

to the parent gallery element? Here's a good thread on the topic.