Почему мой чертов нижний колонтитул не остается внизу страницы?
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>©{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.
С 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 должно помочь, используя подход на основе сетки.