Блог

Главная - Вопросы по программированию - Почему мой нижний колонтитул не остается внизу на сайте Gatsby?

Почему мой нижний колонтитул не остается внизу на сайте Gatsby?

#css #gatsby

#css #gatsby

Вопрос:

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

Итак, вот мой css нижнего колонтитула

       export const FooterContainer = styled.div`
        background-color: #101522;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        bottom: 0;
        width: 100%;
      `

Мой макет div css

  .layout {
   padding-bottom: 160px;
   position: relative;
 }

Мой компонент макета

            return (
          <>
            <Sidebar isOpen={isOpen} toggle={toggle} />
            <Navbar toggle={toggle} />
            <div className="layout">
              <main>{children}</main>
              <Footer />
            </div>
          </>
        )
      }

Затем на моей странице, где мой нижний колонтитул не прилипает к низу, это мой код

              <Layout>
          <div className="resource__container">
            <h1 className="post__heading">
              Here are some resources to learn web development
            </h1>
            <Posts posts={posts} key={posts.id} />
          </div>
        </Layout>

Итак, вот рисунок, показывающий, что происходит

Верхняя черная полоса — это панель навигации

Красный раздел — это мой .resource__container

Пустое пространство под ним — это padding-bottom: 160px из .layout <div>

Тогда последний черный пробел — это footer

После этого там просто <main> , но технически ничего нет, поэтому я не понимаю, почему он не прилипает к основанию

введите описание изображения здесь

Комментарии:

1. Установлена ли высота вашей главной страницы на 100%?

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

Ответ №1:

Учитывая структуру HTML, такую как:

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

Решение для размещения нижнего колонтитула внизу — это использование flexbox:

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

main {
  flex: 1;
}

Ключ min-height: 100vh — это, а также, flex: 1 main тег.

Полезные ресурсы: