Menu
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!
384
Min height always overwrites height and max-height, so you can't just use both. You can use both, but the min-height will take precedence if it ever conflicts with max-height or height.
To summarize: Basically, if the min-height is greater than what the height would otherwise be (whether an explicit height is specified or not), then the min-height is used as the height. If the min-height is less than what the height would otherwise be, then the min-height has no effect.
The min-height property in CSS is used to set the minimum height of a specified element. The min-height property always overrides both height and max-height .
The max-height property in CSS is used to set the maximum height of a specified element. Authors may use any of the length values as long as they are a positive value. max-height overrides height, but min-height always overrides max-height .
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%;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
