html - 如何使百分比高度 div 响应 100vh 部分内的内容

Question

早上好，以为这会很直接但不是(除非我遗漏了一些明显的东西)

[编辑]首页部分的布局必须与一本书的封面相匹配，该封面有黄色条纹，占书本高度的 28%，页面下方的 60% [/编辑]

我在该部分中有一个我想要 100vh 的部分，我有两个 div 设置为百分比高度，每个都有内容。在我减小屏幕尺寸之前，一切看起来都很棒。我怎样才能有一个百分比高度 div 并保持它对内容的响应(除了使用媒体查询)。请注意，我使用 flex 将内容定位在 div 中。

[编辑] 换句话说(如有必要)增加 60% .intro div 和 28% .stripe div 的高度以适应文本换行

我试过在 .stripe 类上使用 min-height:28%; ，但这打破了图像高度为 .stripe 的 80% 的限制高度。任何人都可以帮忙。

.fs {
  height: 100vh;
}
.container {
  margin:0;
  background-color:#545454;
  overflow: auto;
}
.intro {
  height:60%;
}
.bees-intro {
  font-size:60px;
  color:#f4d00b;
  text-align:center;
}
.stripe {
  height:28%; 
  background-color:#f4d00b; 
  color:#000000;
}
.bee-quest {
  font-size:80px;
  margin-right:0px;
  height:100%;
  margin-right:40px;
}
.bee-quest img {
  margin-right:20px;
  height:80%;
}
.align-center-center {
  display: flex;
  justify-content: center;
  align-items: center; 
}
.align-right-center {
  display: flex;
  align-items: center; 
  justify-content: flex-end;
  flex-wrap: wrap;
}

<section id="front-page">
  <div class="fs container">
    <div class="intro align-center-center">
      <h1 class="bees-intro">The Bees of Greater Manchester</h1>
    </div>
    <div class="stripe">
      <div class="bee-quest align-right-center">
        <img src="bee-quest.png">
        <span class="">QUEST</span>
      </div>
    </div>
  </div>
</section>

可以看到工作笔HERE

Answer 1

我不是 100% 确定你所说的没有响应是什么意思，但我猜你希望黄色框在移动时环绕蜜蜂 Logo 和文本？为此，从 stripe 中删除 28% 的高度，并使用其中的内容来确定高度。

这里的例子: https://jsfiddle.net/m3fnp0nL/

如果这不是您想要的，请告诉我:)