Question

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

我使用position实现了这个：css的相对属性和绝对属性。内容div是绝对的，一旦内容增加，就不允许父div的高度增加。

我可以为此获得一些解决方案。我不希望改变现有的实现，只需要在这一个中修复。

我为此创造了一个虚拟小提琴：

感谢您帮助.. !!

.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

有一些解决方案

使用背景图片，不要使用绝对位置。请参阅下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

使用jQuery为父级提供与子级相同的高度并使用img标记

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

孩子必须绝对的具体原因是什么？我不明白为什么这是必要的，因为孩子是嵌套的。如果您向父div添加填充，允许您向子div添加尽可能多的内容而不重叠。

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

以下是一个示例：JSFiddle

创建动态重叠div，它将根据内部内容更改高度

2 个答案: