@Fargoth

Текст вылезает из div по высоте. Как решить?

При увеличении масштаба (или при увеличении кол-ва текста) оный нещадно прет напролом из div блока вниз по высоте. Пробовал менять
height:100%
на
height:auto
Но в таком случае блок съезжает вниз. А если его подвинуть вверх margin-top:-5em;, то при увеличении верхняя половина блока прячется за пределы экрана.
https://codepen.io/Fargoth/pen/YjQgOv
  • Вопрос задан
  • 2946 просмотров
Пригласить эксперта
Ответы на вопрос 5
usdglander
@usdglander
Yipee-ki-yay
Ничего не понял! Блок у вас от верха до низа экрана. Вы увеличиваете размер текста масштабированием (блок увеличиться не может, а текст увеличивается) и вполне логично что когда то текст начинает вываливаться за блок. Что в итоге нужно получить? Запретить масштабирование или скрывать вылезающий текст?
Ответ написан
@aarty20
Front-end / Wordpress developer
Я вам советую отказаться от абсолюта, его придумали не для того чтобы всю страницу позиционировать абсолютно.
Ответ написан
Комментировать
@overveg
Вам нужно поставить верхнюю картинку бэкграундом(н-р, у тега body), а у блока .pageb убрать абсолютное позиционирование, display: inline-block, height и z-index, вместо этого центрировать див с помощью margin: 0 auto.

Не могу промолчать, что здесь нужно убрать спан и добавить этот класс сразу в h1:
<span class="nptitle">
  <h1>Волшебный заголовок новости</h1>
</span>

чтобы получилось
<h1 class="nptitle">Волшебный заголовок новости</h1>

спан внутри заголовка ставить можно, а наоборот - не надо https://www.w3.org/TR/html4/struct/global.html#h-7.5.5

Рекомендую для верстки воспользоваться библиотекой Bootstrap https://getbootstrap.com/
Также можно изучить лучшие практики верстки на сайте w3schools, н-р, про сетку: https://www.w3schools.com/w3css/w3css_layout.asp
Плюс обязательно почитать про семантику html.
Ответ написан
Комментировать
@TeslaGogol
Отвратительная верстка. Посмотрите примеры версток и попробуйте повторять.
Также посмотрите назначение html тэгов.
Ответ написан
Комментировать
warsand
@warsand
Экспериментатор
Собрал все необходимые изменения в эту песочницу.
Всё в норме, диапазон масштабирования по ширине - от 350px.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы