Застрял с отзывчивой высоты блока HTML - PullRequest
Новая
       30

Застрял с отзывчивой высоты блока HTML

0 голосов
/ 01 мая 2018

Я застрял с регулировкой высоты моего блока в зависимости от количества текста внутри него. На настольных компьютерах он работает нормально, но на моем iPhone текст переходит через div с фиолетовым фоном.

The screenshot has been made on iPhone 5S, iOS 11.0

Life demo: 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, но решения многих из них не сработали. Для всего остального решения (например, как мне дать div отзывчивую высоту ) сделали расклад еще хуже.

Любая соответствующая помощь высоко ценится.

Ответы [ 3 ]

0 голосов
/ 01 мая 2018

Вы также можете удалить float и max-width из вашего класса 'section-personal-photo-text'.

Затем добавьте 32% -ое заполнение к вашему разделу с личной фотографией Это приводит к расширению div следующим образом:

enter image description here

note (изображение, которое у вас не появляется, по какой-то причине облачный домен заблокирован в моей сети, но все равно должно работать)

0 голосов
/ 02 мая 2018

Попробуйте установить height: auto;, а не height:100%:.

0 голосов
/ 01 мая 2018

Хорошо, что вы опубликовали живой пример, эта проблема также дублируется браузером Chrome, поэтому я попробовал его и нашел решение, но я рекомендую вам также настроить размер шрифта для небольших устройств, но в любом случае посмотрите на это и подумайте если это хорошо для вас:

1) Установите переполнение : авто для этого элемента: 

 #section-with-personal-photo

2) Установите ширину : 32% для этого элемента: 

#section-with-personal-photo-image

Когда вы просматриваете, вы можете видеть, что родительский элемент растет, и весь контент не переполняется.

Но есть и лучшее решение для этого случая, но я надеюсь, что это поможет вам выяснить проблему переполнения.

...