Материализовать CSS - Липкий нижний колонтитул

Я выполнил описанные здесь шаги - http://materializecss.com/footer.html - чтобы создать липкий нижний колонтитул, но результаты не так ожидаются.Материализовать CSS - Липкий нижний колонтитул

скопировать вставить следующий код в файл materialize.min.css:

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    } 

    main { 
    flex: 1 0 auto; 
    }

источник

2015-04-17 xennygrimmato

* но результаты не как ожидалось. * Можете ли вы быть более конкретными и дать нам демо (скрипку возможно)? –

Почему вы копируете uninified css в мини-файл? – ajmajmajma

Вы, вероятно, не используя <main> тег

Примечание: Мы используем Flexbox структурировать наш HTML так что нижний колонтитул всегда находится в нижней части страницы. Важно, чтобы сохранить структуру вашей страницы в тегах 3 HTML5: <header>, <main>, <footer>

источник

2015-04-23 09:39:57

Спасибо Kenneth De Win этот исправленный мой вопрос – ZoT

Это исправило мою проблему. –

Как я должен использовать

Я обернул все мое содержимое нижним колонтитулом внутри, и он не работал, поддерживая нижний колонтитул вне основного также не работал // = – kroe

просто добавить (#) перед (основной).

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
    } 

    #main { 
    flex: 1 0 auto; 
    }

источник

2015-10-17 07:15:29

Это будет иметь смысл, если вы не используете основной тег, а вместо этого div с классом '.main', который не является тем, что они рекомендуют. – batjko

Поместите фоновый цвет как на тело, так и на главные селектора в css и посмотрите на оба элемента. Если один из них не изменил цвет, это может быть проблемой в css, который был до него, т.е. проверьте стили над ним.

источник

2016-08-06 19:57:56 James

Если посмотреть на источник примера странице вы можете увидеть, как они делают это: http://materializecss.com/footer.html

Структура ваш HTML, как на примере ниже:

<body> 
    <header></header> 
    <main></main> 
    <footer></footer> 
</body>

источник

2016-12-06 21:50:32

Для тех, кто использует Ember. js (v2.14): Вам придется немного изменить инструкции.

Если ваше приложение/шаблон/application.hbs выглядит следующим образом:

<header> 
</header> 

<main> 
{{outlet}} 
</main> 

<footer> 
</footer>

Тогда ваше приложение/стили/app.js должен выглядеть следующим образом:

.ember-view { 
    display: flex; 
    flex-direction: column; 
} 

main { 
    min-height: 100vh; 
    flex: 1 0 auto; 
}

источник

2017-08-20 01:04:07 DataDino

Это исправило мою проблему. Спасибо огромное! – Cameron

материализовать CSS требует структуру:

<body> 
    <header></header> 
    <main></main> 
    <footer></footer> 
</body>

для сохранения. Вот как вы можете реализовать его реакции:

index.html

<body id="root"></body>

index.js

ReactDOM.render(<App/>, document.getElementById('root'))

App.js

render() { 
return (
    [ 
    <header> 
     ... 
    </header>, 
    <main> 
     ... 
    </main>, 
    <footer> 
     ... 
    </footer> 
    ] 
);

Обратите внимание, что мы возвращаем массив для рендеринга нескольких элементов на одном уровне.

индекс.CSS

body { 
    display: flex; 
    min-height: 100vh; 
    flex-direction: column; 
} 

main { 
    flex: 1 0 auto; 
}

источник

2018-02-25 19:35:22

Материализовать CSS - Липкий нижний колонтитул

ответ

Смежные вопросы