时间戳

首页 > 解决方案 > 如何增加父 div 的高度（具有指定的高度）以包含子级

html - 如何增加父 div 的高度（具有指定的高度）以包含子级

问题描述

我有一个带有height:100vh和的主页“英雄形象”div max-height:800px。在这个 div 里面是一个h1. 一切正常，但是当屏幕低于标题时，英雄图像 div 不会增长到包含标题的高度。子元素 - 标题 - 在父元素下方突出。见屏幕抓取：

在此处输入图像描述

注意：我想要最大高度，以便在更大的屏幕上，英雄图像下方的内容是可见的，而无需向下滚动。

我尝试使用最大高度设置最小高度，但正如预期的那样，最小高度会覆盖最大高度。

我也尝试了不同的溢出值，但这不会影响父元素。

那么...我如何创建始终与其子内容一样高的adiv with height:100vh和 a ？max-height

我有点需要最小高度和最大高度一起工作（但最小高度会覆盖最大高度）

<div class="hero_image">
    <h1>Heading line one<br>heading line two<br>heading line three</h1>
</div>  

.hero_image {
    height:100vh;
    max-height:600px;
    background-colour:blue;
}

.hero_image h1 {
    color:white;
    font-size:100px;
    padding-top:8vh;
}

见 JS 小提琴：https ://jsfiddle.net/d6b3rj8o/

===============

唯一的解决方案？

这样做是使用断点的唯一方法吗？见https://jsfiddle.net/z7fy8vhb/2/

.hero_image {
    min-height:100vh;
    }

@media screen and (min-height:600px) {

.hero_image {
    min-height:600px;
    }
}

标签： htmlcss

解决方案

试试这样

HTML

<div class="hero_image">
    <h1>Heading line one<br>heading line two<br>heading line three</h1>
</div>

css

*{
  margin:0;
}
.hero_image {
    height:100vh;
    max-height:600px;
    background-image:url(https://image.freepik.com/free-psd/abstract-background-design_1297-73.jpg);
    background-size:cover;
    }

.hero_image h1 {
    color:white;
    font-size:100px;
    margin:0;
    }

推荐阅读