Почему div-блок с фоном отображается на холсте, но не отображается на опубликованном сайте
Многие пользователи сталкиваются с ситуацией, когда div-блок, контейнер или секция с фоном отлично видны в проекте при редактировании, но пропадают после публикации сайта. Разберемся, почему так получается.
Смотрите видео:
https://vk.com/video-219751701_456239232
Причина проблемы
Добавим в секцию новый div-блок и зададим ему фон. Блок нормально отображается в редакторе.
Но на предварительном просмотре или при публикации проекта блока не видно.
Причина в том, что пустой div-блок не имеет заданной высоты — по умолчанию у него стоит высота auto. Это значит, что высота блока подстраивается под его содержимое. Но поскольку в div-блоке нет контента, то фактическая высота получается равной нулю — следовательно он не отображается.
Почему тогда мы видим div-блок в редакторе?
Это сделано для удобства пользователей — чтобы визуально видеть, где находится блок, и чтобы было проще добавлять в него другие элементы. Пустой div-блок (а также секция или контейнер) при отображении на холсте имеет небольшую высоту, хотя на самом деле в параметрах она не задана.
Как решить проблему
Есть два способа сделать так, чтобы блоки отображались на опубликованном сайте:
- Добавить внутрь блока какой-либо контент — например, текст или изображение.
- Задать блоку минимальную высоту.
Готово! Теперь div-блок виден на предварительном просмотре и на опубликованном сайте.
Резюме
Чтобы блок отображался на опубликованном сайте, задайте ему минимальную высоту или добавьте в него контент.