是否有任何选项可以动态调整绝对定位孩子的高度到他的相对父母？答案

【问题标题】：Is there any option to adjust dynamically height of absolute positioned child to his relative parent?是否有任何选项可以动态调整绝对定位孩子的高度到他的相对父母？
【发布时间】：2018-07-21 09:55:57
【问题描述】：

在缩小浏览器窗口（检查响应模式）期间，我无法让我的子 div 与父级保持相同的高度。我想要实现的是不允许绝对定位的子元素内的内容溢出，但同时希望将子 div 的大小保持在父 div 的 100% 高度。我知道绝对位置会导致元素自然干扰页面定位，但也许你知道一些技巧或JS是唯一的方法？问候！

HTML 代码：

<div class=parent>
<div class=child>
<p class=intro>Introduction</p>
<div class=box_container>
  <div class=box></div>
  <p>some_text</p>
 </div>
 <div class=box_container>
  <div class=box></div>
  <p>some_text</p>
 </div>
 <div class=box_container>
  <div class=box></div>
  <p>some_text</p>
 </div>
</div>
</div>

CSS 代码：

.parent{

  width:250px;
  height:250px;
  background-color:green;
  position:relative;
}

.child{
display:flex;
flex-direction:column;

background-color:red;
position:absolute;

}
.box_container{
  display:flex;
  flex-direction:row;
  align-items:center;

}
.intro{
  position:relative;
   top:10px
}

.box{
  width:15px;
  height:15px;
  background-color:yellow;
}

使用代码链接到 fiddlejs：https://jsfiddle.net/bfbcfu2e/1/

【问题讨论】：

只需将height:100% 添加到.child
如果我这样做了，那么子 div 的内容会因为缩小而溢出；/

标签： html css css-position

【解决方案1】：

您可以添加：

top:0;
bottom:0;

...到一个绝对定位的元素，它将适合其定位容器的高度。但是，如果没有足够的空间容纳文本内容，它将难以为您容纳所有内容。

【讨论】：