Question

我理解多次问过类似的问题，我已经尝试过根据我的代码量身定制的解决方案，但它们似乎都没有。我的网站有一个标题，里面有一个包含Wordpress联系表格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相对于父母的身高没有变化。因此，我正在寻找一种方法，而不是接受绝对和相对位置使用的教育。谢谢！

Answer 1

不确定绝对定位的需要是什么，但如果仅将文字放在图像上，为什么不将图像作为背景图像呢？

＆＃13;

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

＆＃13;

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

＆＃13;

如何根据Child（绝对）div扩展Parent（relative）

1 个答案: