10

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!

caiocpricci2
  • 7,614
  • 10
  • 54
  • 87
  • 2
    Is the button inside a container? that 11% is 11% of the container, not the screensize – Andy Dec 12 '12 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 Dec 12 '12 at 17:28
  • 3
    To answer your title, `min-height` has priority. See http://www.w3.org/TR/CSS21/visudet.html#min-max-heights – BoltClock Dec 12 '12 at 17:28
  • 1
    The element will only trigger the max-height if the content pushes the container to expand. – Jrod Dec 12 '12 at 17:29

1 Answers1

6

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%;
Khan
  • 17,118
  • 3
  • 45
  • 58