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

Я выполнил описанные здесь шаги — http://materializecss.com/footer.html — для создания Sticky Нижний колонтитул, но результаты не такие, как ожидалось.

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

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

  main {
    flex: 1 0 auto;
  }

material-design css materialize
person xennygrimmato    schedule 17.04.2015    source источник
comment
но результаты не такие, как ожидалось. Можете ли вы быть более конкретным и дать нам демонстрацию (возможно, Fiddle)?   -  person A.J. Uppal    schedule 17.04.2015
comment
Почему вы копируете uninified css в уменьшенный файл?   -  person ajmajmajma    schedule 17.04.2015

Ответы (8)


arrow_upward
58
arrow_downward

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

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

person Kenneth De Win    schedule 23.04.2015
comment
Спасибо, Кеннет Де Вин, это решило мою проблему. - person zot24; 04.05.2015
comment
Это исправило мою проблему. - person Stupid.Fat.Cat; 28.01.2016
comment
Как мне использовать ‹main› я обернул весь свой контент нижним колонтитулом внутри, и это не сработало, сохранение нижнего колонтитула вне основного также не сработало //= - person kroe; 30.04.2016
comment
У меня такая же проблема, используя Materialize с React. В моей структуре используются компоненты заголовка, основного и нижнего колонтитула (даже если они находятся внутри div, который является контейнером моего приложения React). Но весь контент содержится в этом основном div (т.е. заголовок, основной и нижний колонтитулы являются его дочерними элементами). И тем не менее, нижний колонтитул все еще не хочет прилипать к низу. - person batjko; 15.06.2016
comment
Моя проблема заключалась в том, что у меня был контейнер div вокруг основного компонента. Поменял их местами и все заработало. - person Christophe De Troyer; 12.02.2018

arrow_upward
11
arrow_downward

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

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

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
person JP_    schedule 06.12.2016

arrow_upward
9
arrow_downward

Если вы используете этот нижний колонтитул под компонентом Angular, возможно, ваши теги <header> <main> <footer> обернуты тегом <app-root>. В этом случае вы должны указать свой css, как показано ниже:

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}
person Samet Baskıcı    schedule 29.03.2018
comment
То же самое для React (и я думаю, что и другие фреймворки тоже). Благодарю вас! - person AdelaN; 16.04.2020

arrow_upward
5
arrow_downward

Материализация 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>
  ]
);

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

index.css

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

main {
  flex: 1 0 auto;
}
person Vadim Aidlin    schedule 25.02.2018

arrow_upward
3
arrow_downward

просто добавьте (#) перед (главным).

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

  #main {
    flex: 1 0 auto;
  }
person Shakour Ghafarzoy    schedule 17.10.2015
comment
Это имеет смысл только в том случае, если вы используете не основной тег, а вместо этого div с классом .main, что они не рекомендуют. - person batjko; 15.06.2016

arrow_upward
1
arrow_downward

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

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

<header>
</header>

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

<footer>
</footer>

Тогда ваше приложение/styles/app.js должно выглядеть так:

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

main {
  min-height: 100vh;
  flex: 1 0 auto;
}
person DataDino    schedule 20.08.2017
comment
Это исправило мою проблему. Большое спасибо! - person Cameron; 05.10.2017

arrow_upward
0
arrow_downward

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

person James    schedule 06.08.2016

arrow_upward
0
arrow_downward

Не знаю почему, но когда я создал приложение asp.net в Visual Studio и реализовал материализацию с липким нижним колонтитулом, я понял, что тег main по какой-то причине не занимает пустое место! даже я точно следовал документации.

Чтобы выяснить почему, я построил аналогичную html-страницу с помощью notepad++ и начал копировать на нее нужный элемент только со страницы Visual Studio (без лишних скриптов и пакетов NuGet, и это прекрасно работает. Тег main просто занят) пустое пространство и нижний колонтитул торчат.

Затем я открыл обе страницы в хроме (одну из Visual Studio и простую из Notepad++) и начал сравнивать оба css для каждого элемента в инструментах разработчика. Они были идентичны!!!! однако main ограничен содержимым в визуальной студии, но занимает пустое место в notepad++!!!.

решение для меня было добавить в css

main {
    min-height: calc(100vh - 90px); 
}

имея в виду, что мой нижний колонтитул имел высоту 90 пикселей.

Я надеюсь, что кто-то может определить основную причину, а не исправлять неизвестную

person omarmallat    schedule 14.07.2019