У меня есть приложение rails, в котором я использую flexbox, чтобы отделить верхний и нижний колонтитулы. Этот flexbox обеспечивает заполнение содержимого пробелами на весь экран, благодаря чему нижний колонтитул всегда должен быть в нижней части макета, как показано на рисунке.
(Не против того, что плохой макет со временем улучшит его)
Код, который я использовал для этого, следующий:
# application.html.slim
body
.box
.row.header
= render 'layouts/navbar'
.row.content
= yield
.row.footer
= render 'layouts/footer'
# custom.css.scss
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
margin-top: 100px;
margin-bottom: 50px;
}
.box .row.footer {
flex: 0 1 40px;
}
Работает как положено. Тем не менее, когда я запустил функцию входа в систему devise и инициировал сообщения об ошибках / успехах, компоновка была испорчена и теперь выглядит так:
Когда я использовал элемент проверки, я увидел, что <div class="row footer"> исчезает, а = render 'layouts/footer' становится ниже <div class="row content">
Я не совсем уверен, что вызывает это поведение, и мне не повезло, что до сих пор его найти.
Мой шаблон для flash:
# _flash.html.erb
- if !flash.empty?
.row
- flash.each do |message_type, message|
| <div class="
= flash_class(message_type)
| closable">
i.close.icon
= message