Jump to content
  • 0
Sign in to follow this  
Павел Хомерики

Как сделать блок 100% высоты и центрирование содержимого внутри него

Question

Это очень актуальный вопрос для пользователей Музы. На нашем форуме много раз обсуждались вопросы - "как сделать блок 100% высоты окна браузера?" и "Как отцентрировать содержимое по высоте экрана?". На каждый из этих вопросов есть отдельный ответ. Комбинирование этих методов вызывает сложности у не опытных пользователей, слабо знакомых с css.
На одном из англоязычных форумов, нашел решение, как комплексно решить обе этих проблемы одним простым приемом. И спешу поделиться этим с форумчанами.
1) Необходимо создать стиль графики в Музе, для нашего блока.

  • Добавляем на холст прямоугольник не настраивая цвета, состояния, заливку и прочие украшения. Прямоугольник должен быть пустой.
  • Создаем стиль графики для этого прямоугольника и назовем его fullheight-container.

Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.
После нажатия кнопки Ок (5) название отобразится в стилях
7e34b0f447.png

2) Вставляем в head страницы следующий код (находясь на странице / правая кнопка за пределами сайта / свойства страницы / вкладка мета данные)

cb2e728d6e.png

Нижеследующий код нужно просто скопировать и вставить. Ничего редактировать и править не нужно

<style>
.fullheight-container {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
margin: 0px !important;
padding: 0px !important;
 height: 100vh !important;
    }


/*
    Optional: Legacy Firefox implementation treats all flex containers
    as inline-block elements.
*/

@-moz-document url-prefix() {
.flex-container {
    width: 100%;
    -moz-box-sizing: border-box;
    }

}
</style>

3) Теперь можно переходить к дизайну блока.

  • Растягиваем на 100% ширины
  • Высоту рекомендую делать не более 700 пикселей
  • Заливаем картинкой или цветом
  • Пишем текст или ставим видео и помещаем его внутри этого блока центруя по горизонтали средствами Музы. Причем не важно где он будет находиться по высоте. В браузере всё отцентруется автоматически

Всё готово - на любых разрешениях кроме тех что меньше заданных в свойствах сайта, блок будет на 100% высоты экрана, а текст расположенный внутри него будет отцентрован по высоте.

В Музе

873de05920.png

В браузере

e5ec09134e.png

Если надо установить несколько объектов - например заголовок и видео, то эти объекты надо сгруппировать, тогда они будут корректно центрироваться по высоте.
9e1f2408f5.png

Пример того что получилось Здесь ссылка, но видят ее только участники клуба. Вступите в клуб по этой ссылке.

Share this post


Link to post

1 answer to this question

Recommended Posts

  • 0

отлично... спасибо.. будем пробовать

а то что можно создавать свои стили - это отлично. не знал что в muse это есть

возможно буду использовать это в виджетах

Share this post


Link to post

Новая статья

Как бесплатно получить специализированный хостинг для Adobe Muse сайта. Читайте новую инструкцию по этой ссылке.
Sign in to follow this  

×
×
  • Create New...