html - 坚持 HTML block 的响应高度

Question

我一直坚持根据其中的文本量来调整 block 的高度。在台式机上它工作正常，但在我的 iPhone 上文本会覆盖紫色背景的 div。

生活演示:https://www.ruslanchik.ru/en/ .要重现该问题，您可以使用您的移动设备。

  

 .section-with-personal-photo {
    width: 100%;
    height: 100%;
    min-height: 360px;
    background-image: linear-gradient(126deg, rgb(92, 52, 116)40%, rgb(142, 102, 206)100%)
}

.section-with-personal-photo-image {
    padding: 0;
    display: block;
    float: left;
    clear: left;
    content: url("//res.cloudinary.com/ruslanchik/image/upload/c_scale,h_360/v1525190031/ruslanchik.ru/i/avatars/LinkedIn-photo-shooting-session-05.04.2018.png")
}

.section-with-personal-photo-text {
    height: 100%;
    max-width: 68%;
    float: right;
    color: #ffffff
}

<div class=section-with-personal-photo>
  <div class=section-with-personal-photo-image></div>
  <div class=section-with-personal-photo-text>
    <h3 id=resume>CV</h3>
    <p>I will tailor it to your specific vacancy and do a keyword opimisation.</p>
    <ul class=dotted-list>
      <li><a href=//www.ruslanchik.ru/en/cv/professional/ title="Ruslan Seletskiy's Professional CV" target=_blank>Professional CV</a></li>
      <li><a href=//www.ruslanchik.ru/en/cv/academic/ title="Ruslan Seletskiy's Academic CV" target=_blank>Academic CV</a> <span> featuring with a long appendix</span></li>
    </ul>
    <p id=make-an-offer>Let me know about some opportunities available at your organisation:
      <ul class=dotted-list>
        <li><a href="mailto:ruslanchik@ruslanchik.ru?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslanchik@ruslanchik.ru">ruslanchik@ruslanchik.ru</a></li>
        <li><a href="mailto:ruslan.seletskiy@gmail.com?subject=Available%20career%20opportunities%20at%20<Organisation name>" title="Send an email to ruslan.seletskiy@gmail.com">ruslan.seletskiy@gmail.com</a> <span> if you think my domain email is unprofessional</span></li>
      </ul>
  </div>
</div>

我检查了 Stackoverflow 上的各种帖子，但其中许多的解决方案都不起作用。对于所有其他问题，解决方案(例如 how do I give a div a responsive height )使布局变得更糟。

非常感谢任何相关帮助。

Answer 1

您还可以从“section-with-personal-photo-text”类中删除 float 和 max-width。

然后向“section-with-personal-photo”添加 32% 的填充。这导致 div 像这样扩展:

请注意(您的图像不会出现，因为 cloudinary 域出于某种原因在我的网络上被阻止，但它应该仍然有效)