如何让父（相对）根据子（绝对）div 展开答案

【问题标题】：How to have Parent (relative) expand according to a Child (absolute) div如何让父（相对）根据子（绝对）div 展开
【发布时间】：2016-03-09 06:09:07
【问题描述】：

我知道类似的问题已经被问过很多次了，我已经尝试过他们为我的代码量身定制的解决方案，但似乎没有一个有效。我的网站有一个标题，里面有一个 div，其中包含一个 Wordpress Contact Form 7 表单。整个网站都是响应式的，除了 Contact form div 保持其高度（不固定）并且不会降低高度 - 只有宽度。下面是代码。 #imgDiv 是父 div，#property-search 是子 div。 #property-search是只减宽不减高的div。

#imgDiv { position: relative; width: 100%; overflow: auto;}
#imgDiv img { width: 100%; }
#property-search { position: absolute;top: 0; margin-left: 450px; min-width: 18%; background-color: rgba(23, 81, 61, 0.5); overflow: auto; margin-right: 450px;}

编辑：我知道定位绝对会导致子 div 的高度相对于其父级不会发生变化。因此，我正在寻找解决此问题的方法，而不是接受有关使用绝对位置和相对位置的教育。谢谢！

【问题讨论】：

你能加个jsfiddle吗？
您了解绝对定位元素不能影响相对父母，但您仍在寻求解决方法....没有除了不使用position:absolute。
如果你想保持孩子的绝对性，你将需要 javascript，但没有进一步的上下文 - 即一点 html 我真的无法评论更好的解决方法
从您的 css 的外观来看，您将文本放在图像之上，那么为什么不将图像作为 imgDiv 上的背景图像，然后使您的属性搜索相对？
谢谢皮特。这正是我在发布问题后所做的。有效！谢谢。

标签： html css wordpress

【解决方案1】：

不确定绝对定位的需要是什么，但如果它只是将文本放在图像之上，为什么不将图像设置为背景图像？

#imgDiv {
  width: 100%;
  overflow: auto;
  background:url(http://lorempixel.com/1000/1000/city/1/) top center no-repeat;
  background-size:cover;
}
#property-search {
  margin-left: 450px;
  min-width: 18%;
  background-color: rgba(23, 81, 61, 0.5);
  overflow: auto;
  margin-right: 450px;
}

<div id="imgDiv">
  <div id="property-search">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate vehicula nisl, vel cursus dolor euismod ut. Praesent ullamcorper pellentesque tellus at sagittis. Etiam rutrum finibus leo at ornare. Praesent fringilla diam at sem egestas, eu dictum urna ullamcorper. Proin ultrices massa sem, vitae convallis nisi rutrum vel. Morbi lobortis metus in arcu consequat, ac sodales mauris interdum. Duis sit amet imperdiet lorem. Aliquam libero odio, vehicula mattis lobortis eu, sagittis eu quam.

Nullam cursus eleifend eros sit amet egestas. Donec vulputate pulvinar neque in rhoncus. Donec ut nibh ac ligula tristique mollis a a quam. Integer iaculis vitae sapien vitae lacinia. Praesent orci urna, maximus non purus vitae, auctor venenatis magna. Duis ante nisi, accumsan id vulputate vitae, efficitur eget turpis. Curabitur et sem pulvinar, posuere magna in, luctus risus. Phasellus bibendum nibh eu ligula ultricies elementum. Vivamus mattis orci mauris, at mattis mauris suscipit in. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus vel lobortis augue. Quisque eu lectus a lacus congue commodo. Maecenas non euismod libero. Proin volutpat lacus vitae venenatis aliquam. Phasellus sed ex sit amet nibh sollicitudin vulputate ut nec ipsum.
  </div>
</div>

【讨论】：