CODEWITHSUNDEEP
heightfluid-layoutcss
Mike
Mike

Reputation: 1738

Relative Height size with a max-height

I am trying to set a height to be relative to the size of the screen (height = 12%), but I don't want it to exceed a certain pixel height (i.e. max-height: 150px). What is the proper css for this. I have tried:

.titleBar {
    position: relative; 
    background-color: #5C755E; 
    padding: 1%; 
    height: 12%; 
    max-height: 100px; 
    border-bottom: .45em solid #DEB887; 
    top:0; 
    left:0; 
    width: 100%;
}

but this ignores the max-height property. On my large desktop screen the titlebar becomes 200px (much too big).

Upvotes: 2

Views: 12166

Answers (2)

user1721135
user1721135

Reputation: 7092

You need to use min-height instead of height. Height overrides min and max height unless set to auto. Combination of height and min-height (unless height:auto) ignores min/max height.

This should work.

.titleBar {
    position: relative; 
    background-color: #5C755E; 
    padding: 1%; 
    min-height: 12%; 
    max-height: 100px; 
    border-bottom: .45em solid #DEB887; 
    top:0; 
    left:0; 
    width: 100%;
}

Upvotes: 3

Cody Guldner
Cody Guldner

Reputation: 2896

You need to add a height to your parent element, if you have one. So if you add a height to the parent element of 432px, the div will now be at a height of 36px.

Also, a few notes.

  • You should choose to use either ems or pixels. Don't use both.
  • If you add the property border-box to the element, the width will show up as 100% of the page, not 100% of the page, and then add the padding, so it turns out to be slightly more.
  • You might want to add a min-height also.

Hope this helps!

Upvotes: 1

Related Questions