Нижний колонтитул не остается на месте (React-Gatsby)

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

import React from "react"

import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"

import "./layoutplus.css"

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
        <div className = "main-cont">
          <main id = "main-post" className = "main-post">{children}</main>

          <Sidebar id = "sidebar" className = "sidebar"/>
        </div>
      <Footer />
    </>
  )
}

export default Layout





import React from 'react'
import {Link} from 'gatsby'

import {FaFacebook, FaTwitter, FaInstagram} from 'react-icons/fa'

export default function Footer() {
    return (
      <div id = "footer" className = "footer">
        <div className = "footer-middle">
          <ul>
            <li><Link className = "footer-link" to = "/">Home</Link></li>
            <li><Link className = "footer-link" to = "/guides">Guides</Link></li>
            <li><Link className = "footer-link" to = "/about">About</Link></li>
          </ul>

          <div className = "footer-bottom">
            <ul className = "footer-ul">
              <li><Link to = "//" ><FaFacebook className = "footer-dot" /></Link></li>
              <li><Link to = "//"><FaTwitter className = "footer-dot" /></Link></li>
              <li><Link to = "//"><FaInstagram className = "footer-dot"/></Link></li>
            </ul>

            <p>Build with <Link style = {{ textDecoration: "none", color: "#663399" }} to = "https://www.gatsbyjs.com/">Gatsby</Link>.</p>
            <p>&copy;{new Date().getFullYear()} <Link className = "footer-link" to = "/about">blablabla</Link> - All Rights Reserved</p>
          </div>
        </div>
      </div>
    )
}
/*MAIN CONT*/
.main-cont {
  max-width: 1344px;
  margin: 0 auto;
  display: grid;
  height: 100vh;
  grid-template-columns: 4.5fr 1.5fr;
  grid-template-rows: 1fr 1fr;
  gap: 1rem;
  grid-template-areas:
    "main-post test-ads"
    "main-post test-hottopic";
  padding-top: 40px;
}

@media only screen and (max-width: 800px) {
  .main-cont {
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr 1fr;
    grid-template-areas:
      "main-post"
      "test-ads"
      "test-hottopic";
    padding-right: 10px;
    padding-left: 10px;
  }
}

.main-post {
  grid-area: main-post;
}

.test-ads {
  grid-area: test-ads;
  border: 1px solid greenyellow;

  text-align: center;
}

.test-hottopic {
  grid-area: test-hottopic;
  border: 1px solid red;

  text-align: center;
}


/*FOOTER*/
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  background: var(--bgGray);
  margin: 0;
  padding-bottom: 20px;
}

.footer-middle {
  color: var(--mainWithe);
}

.footer-middle ul {
  list-style: none;
  color: var(--mainWhite);
  padding: 0rem 2px;
}

.footer-middle li {
  font-size: 1.2rem;
  display: inline;
  margin-right: 1.5rem;
}

.footer-bottom {
  padding-top: 0.5rem;
  padding-bottom: 2rem;
}

.footer-link {
  color: var(--offWhite);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--mainOrange);
}

.footer-ul {
  list-style: none;
  display: inline;
}

.footer-dot {
  color: var(--offWhite);
  height: 27px;
  width: 27px;
}

.footer-dot:hover {
  transition: var(--mainTransition);
  color: var(--mainOrange);
}

Нижний колонтитул, кажется, всегда остается внизу экрана, но никогда не в конце страницы. Я не знаю почему, эта проблема начинается, когда я добавляю сетку в контейнер .main-cont, потому что мне нужна сетка, вложенная в тело. У кого-нибудь есть решение?

🤔 А знаете ли вы, что...
JavaScript позволяет создавать асинхронные запросы к серверу с помощью технологии AJAX.


1
276
1

Ответ:

Решено

С Gatsby следует немного поразить мозг, так как получить доступ к оберткам контента не так просто, но, конечно, выполнимо.

Возьмем ваш <Layout> в качестве примера:

import React from "react"

import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"

import "./layoutplus.css"

const Layout = ({ children }) => {
  return (
    <>
      <Navbar />
        <div className = "main-cont">
          <main id = "main-post" className = "main-post">{children}</main>

          <Sidebar id = "sidebar" className = "sidebar"/>
        </div>
      <Footer />
    </>
  )
}

export default Layout

Используя предыдущую структуру, вы не можете получить доступ к обертке ваших компонентов, потому что Гэтсби оборачивает ее между недоступным <div> с пустым классом. Однако вы можете снова обернуть его в известный элемент класса, например:

const Layout = ({ children }) => {
  return (
    <section className = "site-wrapper">
      <Navbar />
        <div className = "main-cont">
          <main id = "main-post" className = "main-post">{children}</main>

          <Sidebar id = "sidebar" className = "sidebar"/>
        </div>
      <Footer />
    </section>
  )
}

Учитывая этот класс site-wrapper, вы можете добавить следующий CSS:

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

main  {
  flex-grow: 1;
}

По сути, вы говорите обертке (site-wrapper) расширяться до заполнения области просмотра (100vh). Поскольку ваш тег main (при необходимости измените его на нужный класс) может расти свободно (flex-grow: 1), поэтому ваш нижний колонтитул всегда будет внизу страницы, потому что он подталкивается остальной частью столбца flexbox.

Flexbox лучше воспринимается/откатывается в старых браузерах, чем grid , но вы можете добиться этого в любом случае, идея всегда состоит в том, чтобы подталкивать (или позволять main расти) нижний колонтитул внизу, независимо от содержимого. выше, использование некоторого minmax должно помочь, используя подход на основе сетки.