flex не работает в Firefox 53

Немного застрял здесь. Я тестирую свой сайт с Firefox 53. Страницы не заполняют всю высоту. Я проверил на Chrome и Safari, и все выглядит хорошо.

На сайте www.caniuse.com я подтвердил, что Firefox 53 поддерживает Flex, Тем не менее страница не отображается правильно.

Вот сайт http://actionmary.com/newSite/contact.html. Попробуйте Chrome там, где он правильно рендерится, и Firefox 53 там, где его нет.

Вот соответствующий CSS

html{
    background-color: black;
}

body {
    /*min-width:800px;  suppose you want minimun width of 1000px */
    /*width: auto !important;   Firefox will set width as auto */
    width:100%; 

    margin:0;
    font-family: 'futura-pt', sans-serif;
    font-style: normal;
    font-weight: 400;

    display: flex;
    flex-flow: column;
    background-repeat:no-repeat;
    background-size:cover;
}

.content {
    width: 100%;
    flex: 1 1 auto;
    overflow: hidden;    
}
Источник

1 ответ

Решение

Вы работаете с процентными высотами. Например:

.blackbox { min-height: 23%; }

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

Вы можете ожидать изменения рендеринга среди браузеров с этим методом.

Для надежного кросс-браузерного решения body элемент:

height: 100vh;

Или, если вы хотите body расширить с содержанием:

min-height: 100vh;

Подробнее здесь:

Источник
Другие вопросы по тегам