卡在 HTML 块的响应高度上答案

【问题标题】：Stuck with Responsive Height of an HTML block卡在 HTML 块的响应高度上
【发布时间】：2018-10-11 20:15:33
【问题描述】：

我一直在调整块的高度与其中的文本量相关。在台式机上它可以正常工作，但在我的 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）使布局变得更糟。

非常感谢任何相关的帮助。

【问题讨论】：

标签： html css responsive-design height responsive

【解决方案1】：

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

然后为您的“个人照片部分”添加 32% 的填充。这导致 div 像这样扩展：

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

【讨论】：

好的，但是如何让图片贴在div的底部呢？所以它不会在高度维度的中心。
我刚刚进入了不同的网络，所以现在我明白你在说什么了。要回答您的问题，您可以添加 position: relative to 'section-with-personal-photo' 然后添加 position: absolute 和 bottom: 0 到 'section-with-personal-photo-image' 我还将更新图片我的回答
非常感谢您的支持。祝您周三富有成效。

【解决方案2】：

很好，您发布了实时示例，Chrome 浏览器也复制了此问题，所以我尝试了它并找到了解决方案，但我建议您也为小型设备调整字体大小，但无论如何看看它并考虑如果你没问题：

1) 将 overflow: auto 设置为此元素：

 #section-with-personal-photo

2) 将 width: 32% 设置为此元素：

#section-with-personal-photo-image

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

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

【讨论】：

【解决方案3】：

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

【讨论】：