如何让父元素（相对定位）根据子元素（绝对定位）的大小而扩展

Question

我知道类似的问题已经被问了多次，我尝试了他们针对我的代码量身定制的解决方案，但是它们都似乎不起作用。我的网站有一个标题，里面包含一个Wordpress Contact Form 7表单的div。整个网站都是响应式的，除了Contact表单div外，它保持其高度（不固定）并且不会减少高度-只会减少宽度。以下是代码。#imgDiv是父级，#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与其父元素相比高度不变。因此，我正在寻找一种方法来解决这个问题，而不是被教育如何使用绝对和相对位置。谢谢！

- Harry Kitchener

---

你能添加一个 jsfiddle 吗？ - Huelfe

你理解绝对定位元素无法影响相对父元素，但你仍在寻求解决方案……除了不使用position:absolute外，没有其他的方法。 - Paulie_D

如果您想保持子元素的绝对定位，那么您需要使用JavaScript，但是没有更多的上下文 - 也就是说，如果没有一些HTML，我无法评论更好的解决方法。 - Pete

从你的 CSS 看来，你是把文本放在图片上面，那为什么不把图片作为 imgDiv 的背景图像，然后将你的属性搜索设为相对定位呢？ - Pete

谢谢Pete。就在我发完问题后，我也做了同样的事情。它起作用了！谢谢。 - Harry Kitchener

哈哈哈，当你发一个问题的时候，你经常会立刻想到答案！ - Pete

Answer 1

不确定绝对定位的需要是什么，但如果只是为了将文本放在图像上方，为什么不只是将图像设置为background-image呢？

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

- Pete