Question

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

[编辑]首页部分的布局必须与书的封面相匹配，书的黄色条纹高出书本高度的28％，页面向下60％[/编辑]

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

[EDIT]换句话说（如果需要）增加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％肯定你的意思是它没有反应但是我猜你想要黄色的盒子在蜜蜂标志和文字在手机上时包裹？要执行此操作，请从stripe中删除28％的高度，然后使用其中的内容来确定高度。

此处示例： https://jsfiddle.net/m3fnp0nL/

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

Answer 2

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

.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中滚动

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

2 个答案: