How can I calculate the height of dynamic elements?

Question

Here is my code:

.parent{
  position: fixed;
  border: 1px solid;
  height:  40%;
  width: 300px;
  max-height: 200px;
}

.first_child{
  border: 1px solid blue;
  padding: 10px;
  height: 20px;
  text-align: center;
}

.second_child{
  border: 1px solid red;
  height: 100%;
  overflow-y: scroll;
}

<div class="parent">
  <div class="first_child">title</div>
  <div class="second_child">
    one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
  </div>
</div>

As you see .second_child is out of parent. I want to keep it inside .parent element. How can I do that?

In other word I want to implement something like this:

.second_child{
  height: 100% - 40px;    
              /* 40px: 20px of .first_child's height, 10+10px of .first_child's padding */ 
  ...
}

Note: I don't want to use neither calc() or box-sizing: border-box; .. Because they aren't supported in old browsers like IE7. So I'm looking for a third approach.

@Vohuman I don't want to use neither `calc()` or `box-sizing: border-box;` .. I'm looking for a third approach. — stack, Aug 22 '16 at 02:40
@RajSharma In your case, *scroll-bar* goes also upon `.first_child` element. — stack, Aug 22 '16 at 02:57
@QoP Well if there is any approach in JS, yes I want to use it. — stack, Aug 22 '16 at 02:58
Since you can't use `calc()` or flexbox since you want IE7 support, try good old-fashioned tables: http://stackoverflow.com/q/33129660/3597276 — Michael Benjamin, Aug 22 '16 at 03:04

score 0 · Accepted Answer · answered Aug 22 '16 at 05:46

Would something like this work?

.parent{
  position: relative;
  border: 1px solid;
  height: 100%;
  width: 300px;
  max-height: 200px;
  min-height: 100px;
}

.first_child{
  border: 1px solid blue;
  padding: 10px;
  height: 20px;
  text-align: center;
}

.second_child{
  border: 1px solid red;
  overflow-y: scroll;
  position: absolute;
  top: 40px;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="parent">
  <div class="first_child">title</div>
  <div class="second_child">
    one<br>two<br>three<br>four<br>five<br>six<br>seven<br>eight<br>night<br>ten<br>
  </div>
</div>

How can I calculate the height of dynamic elements?

1 Answers1