Как сохранить содержимое внутри нижнего колонтитула и заголовка в компоненте React?

Question

Я знаю, что об этом можно спросить много, но почему-то я не могу найти решение. Мой проект в React и мой главный компонент настроены так:

<Provider store={store}>
  <Router>
    <Header />
    <Switch>
      <All the routes />
    </Switch>
    <Footer />
  </Router>
</Provider>

Как вы можете видеть, я хочу использовать верхний и нижний колонтитулы на всех моих страницах. С моей текущей настройкой, это работает, когда высота моего контента больше высоты просмотра. Я имею в виду нижний колонтитул всегда остается на дне. Проблема возникает на моих меньших страницах, где содержимое страницы меньше высоты просмотра, но мой нижний колонтитул все еще немного ниже высоты просмотра.

Мой текущий код css (без лишнего кода): Заголовок

padding: "0.2em 4em"

Content-Wrapper

minHeight: "100%",

Нижний колонтитул

padding: "3em"

Одна из страниц в ссылке (которая показывает, как нижний колонтитул находится ниже vh Заголовок остается наверху как элемент блока по умолчанию и в порядке): Результат

Answer 1

вы должны использовать flexbox в этом случае. Ваш код реагирует, но я постараюсь использовать html и css, чтобы вы могли понять правила, которые вы должны применять. Посмотрите на этот пример:

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

.header {
  position: sticky;
  top: 0;
  padding: 15px 5px;
  background-color: pink
}

.footer {
  padding: 15px 5px;
  background-color: pink;
  margin-top: auto;
}

<div class="app">
  <div class="header">
    Your Header
  </div>

  <div class="app-content">
    Your will have routes here that will render your components as required
  </div>

  <div class="footer">
    Your Footer
  </div>
  <div>

Хитрость заключается в том, чтобы использовать margin-top в нижнем колонтитуле, и это даст желаемый результат.

Дайте мне знать, если у вас есть дополнительные вопросы или недоразумения по этому поводу.