卡在 HTML 块的响应高度
Stuck with Responsive Height of an HTML 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>
我查看了 Whosebug 上的各种帖子,但其中许多的解决方案都不起作用。对于所有其他问题,解决方案(例如 how do I give a div a responsive height)使布局变得更糟。
非常感谢任何相关帮助。
很好,你发布了实例,这个问题也被 Chrome 浏览器复制,所以我试了一下,找到了解决方案,但我建议你也为小型设备调整字体大小,但是无论如何看看它并考虑是否适合你:
1) 将溢出:自动设置为该元素:
#section-with-personal-photo
2) 设置 width: 32% 到这个元素:
#section-with-personal-photo-image
当你是view的时候,可以看到父元素在长大,所有的内容都没有溢出。
但是对于这种情况也有更好的解决方案,但我希望这可以帮助您解决这个溢出问题。
您还可以从 'section-with-personal-photo-text' class 中删除浮动和 max-width。
然后向 'section-with-personal-photo' 添加 32% 的填充。这导致 div 像这样扩展:
注意(你的图片没有出现,因为 cloudinary 域由于某种原因在我的网络上被阻止了,但它应该仍然有效)
尝试设置 height: auto;
而不是 height:100%:
。
我无法根据其中的文本量来调整块的高度。在台式机上它工作正常,但在我的 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)使布局变得更糟。
非常感谢任何相关帮助。
很好,你发布了实例,这个问题也被 Chrome 浏览器复制,所以我试了一下,找到了解决方案,但我建议你也为小型设备调整字体大小,但是无论如何看看它并考虑是否适合你:
1) 将溢出:自动设置为该元素:
#section-with-personal-photo
2) 设置 width: 32% 到这个元素:
#section-with-personal-photo-image
当你是view的时候,可以看到父元素在长大,所有的内容都没有溢出。
但是对于这种情况也有更好的解决方案,但我希望这可以帮助您解决这个溢出问题。
您还可以从 'section-with-personal-photo-text' class 中删除浮动和 max-width。
然后向 'section-with-personal-photo' 添加 32% 的填充。这导致 div 像这样扩展:
注意(你的图片没有出现,因为 cloudinary 域由于某种原因在我的网络上被阻止了,但它应该仍然有效)
尝试设置 height: auto;
而不是 height:100%:
。