如何计算动态元素的高度？答案

【问题标题】：How can I calculate the height of dynamic elements?如何计算动态元素的高度？
【发布时间】：2016-12-28 11:32:18
【问题描述】：

这是我的代码：

.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>

如您所见，.second_child 超出了parent。我想把它放在.parent 元素中。我该怎么做？

换句话说，我想实现这样的东西：

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

注意：我不想使用 calc() 或 box-sizing: border-box; .. 因为它们在 IE7 等旧浏览器中不受支持。所以我正在寻找第三种方法。

【问题讨论】：

developer.mozilla.org/en/docs/Web/CSS/calc
@Vohuman 我不想使用calc() 或box-sizing: border-box; .. 我正在寻找第三种方法。
如果使用overflow-y:scroll;在你的 .parent 中。
你想用 JS 来做那个方法吗？
@RajSharma 在您的情况下，scroll-bar 也会出现在 .first_child 元素上。

标签： javascript jquery html css

【解决方案1】：

这样的东西有用吗？

.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>

【讨论】：