html - 创建动态重叠 div，它会根据内部内容改变高度

Question

我想创建一个结构，其中有一个背景容器，该容器将包含一些图像并具有一些最小高度。在该容器的顶部将有另一个容器，其中将包含一些文本内容。现在如果文本内容增加，我的父容器的高度需要增加。

我已经使用 position:relative 和 absolute CSS 属性实现了这一点。内容 div 是绝对的，不允许父 div 的高度在内容增加后增加。

我能得到一些解决方案吗？我不想更改现有的实现，只需要在这一个中进行一些修复。

我为此创建了一个虚拟 fiddle :

感谢您的帮助..!!

.parent{
          position:relative;
          min-height:300px;
          border:1px solid;
}
.child{
          position:absolute;
          width:200px;
          height:auto;
          border:1px solid;
}

<div class="parent">
    <div class="child">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

https://jsfiddle.net/arpagrawal/kd144czz/1/

Answer 1

有几种解决方法

1. 使用背景图片，不要使用绝对位置。看下面的片段

.parent {
  position: relative;
  min-height: 300px;
  border: 1px solid;
  background-image: url('https://via.placeholder.com/350x150');
  background-repeat: no-repeat;
  background-size: cover;
}

.child {
  width: 200px;
  height: auto;
  border: 1px solid;
}

<div class="parent">
    <div class="child">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
</div>

1. 使用 jQuery 为父子赋予相同的高度并使用 img 标签

$(".parent").height($(".child").height())

.parent{
          position:relative;
          min-height:200px;
          border:1px solid;
}
.parent img {
	width:100%;
	height:100%;

}
.child{
          position:absolute;
          width:200px;
          height:auto;
          border:1px solid;
					top:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<img src="http://via.placeholder.com/350x150">
    <div class="child">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
				
    </div>
</div>