21

I know that when you use a percent height on an element, the percentage is the percent of it's parent. Let's say that you want a child to be 40% of it's parent. The parent has a max and a min height assigned, but it does not have an explicit height assigned. For example:

<div id="container">
  <div id="one">
    <div id="two"></div>
  </div>
</div>

css

#container{
  height: 500px;
  background: yellow;
}
#one{
  background: red;
  min-height:100px;
  max-height: 50%;
  padding: 10px;
}
#two{
  background: blue;
  height: 40%;
}

Div two will not appear. When you change the css of his parent (div one) from this max-height:50% to this: height:50% div two will appear because it knows what the height of his parent is because it is explicitly defined. My question is there a way to make div two appear while using (min/max)-height and not height

Here is a fiddle

Kyle Weller
  • 2,533
  • 9
  • 35
  • 45
  • Don't change, add; http://jsfiddle.net/V78Kx/ – Dan Heberden Oct 04 '13 at 21:11
  • @DanHeberden Thanks, but I don't want div one to always be 50%. I want it to be able to vary between 100px and 50%. – Kyle Weller Oct 04 '13 at 21:13
  • How will it vary? Setting `height:50%` and `min-height:100px` will keep the min if `#container` resizes; I suppose I don't understand how variability will be impacted with a fixed 500px height on the parent :/ – Dan Heberden Oct 04 '13 at 21:15
  • That's the thing, the container will not be a fixed 500px. I am just simplifying for the fiddle. – Kyle Weller Oct 04 '13 at 21:21
  • If you're trying to get CSS to pick between 100px and 50% dependent on the parent height, that's not possible. If you adjust the height in my fiddle on `#container`, `#two` will keep at 50%, but respect the min/max set. That's how it's supposed to work. If you want other behaviour, perhaps a flex box or controlling via JS would be necessary. – Dan Heberden Oct 04 '13 at 21:23
  • There will be dynamic content of different size, but I want a hard limit of 100px and 50%. I'm trying to focus this question on the high level principle here to know if there is a way for the child to have a percent height if there is only a max/min height set on parent. – Kyle Weller Oct 04 '13 at 21:42
  • Ok I've just spent hours playing with this and the verdict is: **NOT POSSIBLE**. Apparently it is not possible to compute a height percentage of "AUTO" height parent, min and max values are not considered when a child has percentage height. It doesn't even work by wrapping `div#two` in another parent with `height:100%` `(#one > #wrapper > #two)`. This is a deadend as far as pure CSS is concerned. JavaScript is your friend. – Aziz Feb 25 '16 at 20:12

2 Answers2

9

Check this out, you are missing one tiny piece. Suppose you want to set the height of #one compared to #container and #two compared to #one (that's what I think you are going for). We need a height statement of #one to get a height from #two. The trick here is to set a max-height, a min-height, AND a height to the element, thereby giving it a height that is constrained by the min and the max.

Try this css:

 <style>
 #container{
   height: 74vh;
   background: yellow;
 }
 #one{
   background: red;
   min-height:100px;
   max-height: 50%;
   height: 100%;
   padding: 10px;
 }
 #two{
   background: blue;
   height: 40%;
 }
 </style>

The height is never achieved because it is constrained by the max-height, but without declaring the height it is height: auto, which is undeclared. I set the height of #container as 74vh to make the whole thing responsive according to the size of the viewport.

TMKAB121
  • 276
  • 2
  • 8
  • Dat neat trick. I just added `height: 100vh;` to the element with `max-height`, and boom: `height` works on its children. – Thomas Nov 01 '17 at 13:03
0

If you dont specify height, or you specify height by percetage but not giving its parenet a specify height, block element will resize to content height (0px for #two in this case).

Longer Explain

So just set height to min-height, because DOM height will start from min-height without specifying height.

jsFiddle

#one{
    background: red;
    min-height: 100px;
    height: 100px;
    max-height: 50%;
    padding: 10px;
}
Community
  • 1
  • 1
Banana-In-Black
  • 2,558
  • 1
  • 27
  • 33