Материализовать CSS - Sticky Footer

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

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

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

  main {
    flex: 1 0 auto;
  }

Ответ 1

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

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

Ответ 2

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

Создайте свой HTML-код, как показано ниже:

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

Ответ 3

просто добавьте (#) перед (main).

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

  #main {
    flex: 1 0 auto;
  }

Ответ 4

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

Ответ 5

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

app-root {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}

Ответ 6

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

Если ваше приложение /template/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;
}

Ответ 7

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

Ответ 8

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

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

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

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

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

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

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