Setting the height of child to parent div by using only CSS and without JS

Question

I am trying to set child div height 100% to parent div. As it is a style thing, I don't want to use JS/JQ, this should be done in CSS. Here is the Link of Code and This is snippet:

HTML:

<div class="a">
  <div class="c"></div>
  <div class="b"></div>
</div>

CSS:

.a{
  float: left;
  background: red;
  padding-right: 1px;
  height: 100%;
}
.b{
  position: relative;
  float: left;
  background: blue;
  display: table;
  height: 100%;
  width: 29px;
}
.c{
  height: 300px;
  width: 90px;
  background: grey;
  float: left;
}

Please Don't use Position: Absolute/Relative, that is not an option for me in my current code structure

possible duplicate of [How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) - also possible duplicate [CSS - Expand child DIV height to parent's height](http://stackoverflow.com/questions/4804581/css-expand-child-div-height-to-parents-height) - Note that the accepted answers are not always the most informative answers. — showdev, Apr 10 '15 at 16:28

Adam Jenkins · Answer 1 · 2015-04-10T16:31:57.157

1

height:100% only works on an element if the height of the parent element is known (and/or calculable).

If the parent of .a doesn't have a specified/inherited height, then height: 100% has no effect on it (and thus, height: 100% on .b also has no effect because .a doesn't have a specified/calculable height).

Alternatively, you could do this really easily with flexbox (browser support is IE10+ and everything else):

.a{
  float: left;
  background: red;
  padding-right: 1px;
  display: flex;
}
.b{
  background: blue;
  width: 29px;
}
.c{
  height: 300px;
  width: 90px;
  background: grey;
}

<div class="a">
  <div class="c">c</div>
  <div class="b">b</div>
</div>

edited Apr 10 '15 at 16:31

answered Apr 10 '15 at 16:28

Adam Jenkins

51,445
11
72
100

is there any way out other than using absolute position? – Bharat Soni Apr 10 '15 at 16:30
@BharatSoni What do you mean? Adam is not using absolute position - he's using [flexible boxes](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes). – showdev Apr 10 '15 at 16:31
@showdev What I am saying is, neither the Height is not specified nor using position absolute is option for me. so is there any other way to fix this – Bharat Soni Apr 10 '15 at 16:34
@BharatSoni Adam's solution shown above neither specifies the parent height nor uses absolute position. – showdev Apr 10 '15 at 16:36
1

Now he edited the answer :) :) and it works for me :) – Bharat Soni Apr 10 '15 at 16:36

score 1 · Answer 2 · answered Apr 10 '15 at 16:33

You could make the wrapper div to act as a display: table, and the children to behave as display: table-cell. This would equal the children's height:

.a{
  float: left;
  background: red;
  display: table;
}
.b{
  display: table-cell;
  background: blue;
  width: 29px;
}
.c{
  display: table-cell;
  height: 300px;
  width: 90px;
  background: grey;
}

<div class="a">
  <div class="c">c</div>
  <div class="b">b</div>
</div>

score 0 · Answer 3 · answered Apr 10 '15 at 16:33

An alternative way of doing it, rather than floats and display: table would be display: flex.

You can use display: flex on the container and flex: grow on the child.

Here is a link that explains the process in more detail:

https://css-tricks.com/boxes-fill-height-dont-squish/

Setting the height of child to parent div by using only CSS and without JS

3 Answers3