Html 如何将div height设置为等于它的div height？

我想知道如何根据div上的内容调整div的高度。例如，我有以下HTML：

div.Pantalla{
背景图像：url（“https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg");
背景尺寸：封面；
证明内容：中心；
对齐项目：居中；
高度：自动；
显示器：flex；
弯曲方向：立柱；
}
1.处方{
位置：相对位置；
宽度：80%；
保证金：自动；
}
形式{
边缘顶部：10px；
显示：块；
宽度：100%；
填充：16px；
边框：1px纯黑；
边界半径：5px；
背景：深蓝；
}
.表格内联{
显示器：flex；
柔性流：行换行；
对齐项目：居中；
}
/*为每个标签添加一些边距*/
.表格内联标签{
保证金：5px10px 5px0；
}
/*设置输入字段的样式*/
.表单内联输入{
垂直对齐：中间对齐；
保证金：5px10px 5px0；
填充：10px；
背景色：#fff；
边框：1px实心#ddd；
}
/*设置提交按钮的样式*/
.表单内联按钮{
宽度：10%；
文本对齐：居中；
填充：10px 20px；
边框：1px实心#ddd；
背景：#0095dd；
背景尺寸：封面；
颜色：白色；
}
.表单内联按钮：悬停{
背景颜色：浅蓝色；
}
保险商实验室{
宽度：100%；
填充：16px；
边框：2件纯黑；
边界半径：5px；
背景：深蓝；
边缘顶部：10px；
}
李{
位置：中心；
宽度：100%；
}
.栏目{
浮动：左；
边缘顶部：20px；
宽度：80%；
保证金权利：10%；
左边距：10%；
位置：相对位置；
}
.列按钮{
保证金权利：10%；
左边距：10%；
边缘顶部：10px；
宽度：80%；
文本对齐：居中；
填充：10px 20px；
边框：1px实心#ddd；
背景：#0095dd；
背景尺寸：封面；
颜色：白色；
}
.列按钮：悬停{
背景颜色：浅蓝色；
}

走！

航班{{pack.Flight.Airline}，{{pack.Flight.LandMarkName{u Origin}-{{pack.Flight.LandMarkName{u Destination}}用于{{pack.Flight.minPrice}多拉
入住{{pack.hotel.name}，入住{{pack.hotel.start\u rating}/{pack.hotel.scale}星级酒店
访问
{{places.name}


了解了！

背景仅覆盖第一个div的原因是缺少显示规则

请添加

显示：flex

和

flex direction:column

，然后您将看到它正在工作

div.Pantalla{
背景图像：url（“https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg");
背景尺寸：封面；
证明内容：中心；
对齐项目：居中；
高度：自动；
/*加上这个*/
显示器：flex；
弯曲方向：立柱；
}
1.处方{
位置：相对位置；
宽度：80%；
保证金：自动；
}
形式{
边缘顶部：10px；
显示：块；
宽度：100%；
填充：16px；
边框：1px纯黑；
边界半径：5px；
背景：深蓝；
}
.表格内联{
显示器：flex；
柔性流：行换行；
对齐项目：居中；
}
/*为每个标签添加一些边距*/
.表格内联标签{
保证金：5px10px 5px0；
}
/*设置输入字段的样式*/
.表单内联输入{
垂直对齐：中间对齐；
保证金：5px10px 5px0；
填充：10px；
背景色：#fff；
边框：1px实心#ddd；
}
/*设置提交按钮的样式*/
.表单内联按钮{
宽度：10%；
文本对齐：居中；
填充：10px 20px；
边框：1px实心#ddd；
背景：#0095dd；
背景尺寸：封面；
颜色：白色；
}
.表单内联按钮：悬停{
背景颜色：浅蓝色；
}
保险商实验室{
宽度：100%；
填充：16px；
边框：2件纯黑；
边界半径：5px；
背景：深蓝；
边缘顶部：10px；
}
李{
位置：中心；
宽度：100%；
}
.栏目{
浮动：左；
边缘顶部：20px；
宽度：80%；
保证金权利：10%；
左边距：10%；
位置：相对位置；
}
.列按钮{
保证金权利：10%；
左边距：10%；
边缘顶部：10px；
宽度：80%；
文本对齐：居中；
填充：10px 20px；
边框：1px实心#ddd；
背景：#0095dd；
背景尺寸：封面；
颜色：白色；
}
.列按钮：悬停{
背景颜色：浅蓝色；
}

走！

航班{{pack.Flight.Airline}，{{pack.Flight.LandMarkName{u Origin}-{{pack.Flight.LandMarkName{u Destination}}用于{{pack.Flight.minPrice}多拉
入住{{pack.hotel.name}，入住{{pack.hotel.start\u rating}/{pack.hotel.scale}星级酒店
访问
{{places.name}


了解了！

我可以看到，在主div元素中有一个主div和两个子div 您希望的背景图像必须覆盖两个div。 如果我是对的，那么改变你的主要元素的高度

height: 100vh;

改变你的css代码如下，看看会发生什么

div.Pantalla {
  background-image: url("https://cdn.pixabay.com/photo/2015/07/11/23/02/plane-841441_1280.jpg");
  background-size: cover;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

---

如果您想要的是占用其父级所有空间的图像，请尝试以下操作： 我假设div.Pantalla的父对象是id:app的div

#应用程序{
位置：相对位置；
宽度：100%；
高度：自动；
}
潘塔拉分区{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}

我希望它的高度与内部div高度的“总和”相同。所以，基本上，我想要的是Pantallas的高度和它的背景，在显示时覆盖搜索器（正如它目前所做的）和列菜单div。请参考新的答案，谢谢。我需要将它添加到CSS中的Pantalla块中，对吗？是的，请将它添加到div的CSS中。Pantallast不工作