I have a menu, with 9 items. I want the button height to have 40px OR 11%(1/9 of the screen) of the screen size. Whathever is the largest.

Right now i have:

min-height:40px;
max-height:11%;

And it's always 40px. Even when my screensize is larger than that.

Can I achieve that on css or I have to use javascript?

Thank you.

EDIT

JSFiddle for it.

@Jeffery Khan is right, that solves it. I had a different element pushing it up. Thank you!

I have a menu, with 9 items. I want the button height to have 40px OR 11%(1/9 of the screen) of the screen size. Whathever is the largest.

Right now i have:

min-height:40px;
max-height:11%;

And it's always 40px. Even when my screensize is larger than that.

Can I achieve that on css or I have to use javascript?

Thank you.

EDIT

JSFiddle for it.

@Jeffery Khan is right, that solves it. I had a different element pushing it up. Thank you!

• javascript
• html
• css

• 2 Is the button inside a container? that 11% is 11% of the container, not the screensize – Andy Commented Dec 12, 2012 at 17:26
• The button is inside a container that occupies 100% of the screen. I can see on firebug the container taking up the whole screen. – caiocpricci2 Commented Dec 12, 2012 at 17:28
• 3 To answer your title, min-height has priority. See w3/TR/CSS21/visudet.html#min-max-heights – BoltClock Commented Dec 12, 2012 at 17:28
• 1 The element will only trigger the max-height if the content pushes the container to expand. – Jared Commented Dec 12, 2012 at 17:29

2 Answers 2

min-height is generally the height of whatever something is set to unless something causes it to expand passed that, such as the contents of a div.

Try the following:

min-height:40px;
height:11%;

You don't need javascript now that we have min(), max() and clamp().

While these weren't around in 2012 they've been well supported for several years now.

Based on your original question:

I want height of 40px or 11%, whichever is greatest:

First of all it's usually better to use vw or vh (instead of %) if you want to refer to a proportional size of the screen, since 11% will just be 11% of the containing element and can be unpredictable.

So with min / max you can use:

height: max(40px, 11vw);   

Another alternative (and frankly I find this easier to read) you can use clamp:

height: clamp(100px, 50vh, 900px);

This will 'prefer' to be a height of half the viewport with a minimum of 100px and a maximum of 900px (for really tall screens). So you get really nice fluid motion when you resize the screen with no coding.

Of course these can be used in conjunction with min-height or max-height as well if that is more appropriate for your needs.

Wow I'm amazed nobody added this in over ten years!