-1

so i have 2 divs that one of them is made with min-height, and second one, inside the first one, is about to get the height of his parent, but that not what really happens, as height without min is working, but i need min with it.
so this is the code that i have made:

<div style="background:red; width:100px; min-height:calc(100% - 50px);position:absolute;">
<div style="background:yellow; width:100px; height:100%;">Yellow</div>
</div>

and it's not working as it should be (yellow block must be 100% of parent). Also, i don't want make the yellow one absolute, because i want his height to affect on his parent.

user3063602
  • 49
  • 1
  • 1
  • 7
  • 1
    "_yellow block must be 100% of parent_" it surely is. But your problem is `min-height` in the parent `div`. You set it to `calc(100% - 50px)`, but `100%` of what exactly? – matewka Dec 19 '14 at 12:32
  • Children must be 100% of parent's height. – user3063602 Dec 19 '14 at 12:33

1 Answers1

0

Since the child is to be the same size as the parent, you can position it absolutely as well.

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.red {
  background: red;
  min-height: calc(100% - 50px);
  position: absolute;
  width: 100px;
}
.yellow {
  background: yellow;
  width: 100px;
  height: 100%;
  position: absolute;
}
<div class="red">
  <div class="yellow">Yellow</div>
</div>
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Ok thanks, now i have another issue. i would like to take the higher height from yellow or red, and make them be at the same height. – user3063602 Dec 19 '14 at 12:53
  • I suggest you start a new question for that as you are now changing your original request which was that the child should have the same height **based on the parent**. A second question is better than changing this one. – Paulie_D Dec 19 '14 at 12:55
  • Thanks but i reffers to the same question, but without absoluting the child. – user3063602 Dec 19 '14 at 13:22
  • Now you're changing the question. It's not clear what you are **really** trying to do. – Paulie_D Dec 19 '14 at 13:27
  • The red block is the main page. the yellow block is side menu. I'm trying to make the menu be always from top to bottom. – user3063602 Dec 19 '14 at 13:31
  • So the red bloc is actually the body? – Paulie_D Dec 19 '14 at 13:32
  • Part of the main page, there is header, this red block and footer. – user3063602 Dec 19 '14 at 13:36
  • I think we need to see a design image because I suspect that this has been covered many times before – Paulie_D Dec 19 '14 at 13:40
  • More Like yellow always like this: http://jsfiddle.net/o58xjw30/1/ even if the purple is bigger: http://jsfiddle.net/o58xjw30/2/ in the second example the yellow one not heighted from bottom to top like in the first one. – user3063602 Dec 19 '14 at 15:28
  • The yellow and purple in my example will always be the same height. Anyway, I don't think I can help here any more. I'm not really sure what it is you are grasping for. – Paulie_D Dec 19 '14 at 15:29
  • In your example there is overflow:hidden which doesn't allow scroll the page. on my example there isn't. – user3063602 Dec 19 '14 at 15:32