卡在 HTML 块的响应高度

Question

我无法根据其中的文本量来调整块的高度。在台式机上它工作正常，但在我的 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>

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

非常感谢任何相关帮助。

Answer 1

很好，你发布了实例，这个问题也被 Chrome 浏览器复制，所以我试了一下，找到了解决方案，但我建议你也为小型设备调整字体大小，但是无论如何看看它并考虑是否适合你：

1) 将溢出：自动设置为该元素：

 #section-with-personal-photo

2) 设置 width: 32% 到这个元素:

#section-with-personal-photo-image

当你是view的时候，可以看到父元素在长大，所有的内容都没有溢出。

但是对于这种情况也有更好的解决方案，但我希望这可以帮助您解决这个溢出问题。

Answer 2

您还可以从 'section-with-personal-photo-text' class 中删除浮动和 max-width。

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

注意（你的图片没有出现，因为 cloudinary 域由于某种原因在我的网络上被阻止了，但它应该仍然有效）

Answer 3

尝试设置 height: auto; 而不是 height:100%:。

卡在 HTML 块的响应高度

Stuck with Responsive Height of an HTML block

html

css

responsive-design

height

responsive