html - 如何增加父 div 的高度(具有特定高度)以包含子元素

Question

我有一个主页“主图”div，其中包含 height:100vh 和 max-height:800px。在这个 div 中是一个 h1。一切正常，但是当屏幕的高度低于标题时，英雄图像 div 的高度不会增长以包含标题。子元素——标题——突出在父元素之下。查看屏幕截图:

注意:我想要最大高度，以便在大屏幕上无需向下滚动即可看到英雄图片下方的内容。

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

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

那么...我如何创建一个 div with height:100vh 和一个始终与其子内容一样高的 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 Fiddle: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;
    }
}

Answer 1

这样试试

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