Jump to content

What do max-height and min-height do?


msphelix
 Share

Recommended Posts

They specify the corresponding min/max values. For example, min-width: 200px will not allow the element to go smaller than 200px wide. The effects of these properties aren't easily noticeable (especially the min- properties) until you resize the browser window. The max- values prevent elements from getting too big. So if you set a max-height and you put a lot of content in an element, the element will only be as tall as its max-height will allow. Content that doesn't fit will be displayed (or hidden) depending on the overflow property. Usually, that means the element will become scrollable.

Link to comment
Share on other sites

The effects of min/max-width/height become most apparent when width/height use relative units, while min/max-width/height use absolute ones. With those combined, you'll be saying, for example "Have this element 100% (width) of the window width, but if this width is less then 100px (min-width), stretch it to be exactly 100px, and if it's larger than 800px (max-width), shrink it to 800px".

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...