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

Question

早上好， 认为这个会是直截了当的，但不是（除非我遗漏了一些明显的东西）

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

我有一个部分，我希望该部分中的 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

感谢肖恩，我找到了一个很好的解决方案

.stripe设置为min-height: 28vh;，图片设置为height: calc(28vh - 20px);

我已将.intro 设置为min-height:60vh，以便环绕文本会增加容器大小。

.fs {
  height: 100vh;
}
.container {
  margin:0;
  background-color:#545454;
  overflow: auto;
}
.intro {
  min-height:60vh;
}
.bees-intro {
  font-size:60px;
  color:#f4d00b;
  text-align:center;
}
.stripe{
  background-color:#f4d00b; 
  color:#000000;
  min-height:28vh;
}
.bee-quest {
  font-size:80px;
  margin:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content: center;
  align-items: center; 
}
.bee-quest img {
  height: calc(28vh - 20px);
}
@media (min-width: 768px) {
  .bee-quest img {
    margin-right:20px;  
  }
  .bee-quest span {
    margin-right:20px;  
  }
}
.align-center-center {
   display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.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 align-right-center">
    <div class="bee-quest">
      <img src="http://www.beequest.co.uk/images/bee-quest.png">
      <span class="">QUEST</span>
    </div>
  </div>
</section>

原笔已更新为正确答案

我现在唯一的问题是内容在 div 内滚动

Answer 2

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

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

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