Чтобы добавить глобальные стили (например, те, о которых вы говорите), у вас есть несколько способов. Самый простой — использовать файл gatsby-browser.js. Я предоставлю решение для вашего варианта использования на основе моих путей, адаптирую его по вашему желанию.
Создайте файл global.css в /src/styles/global.css и вставьте свой код:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
В файле gatsby-browser.js импортируйте свои глобальные стили:
import './src/styles/global.css';
По сути, вы добавление глобальных стилей с помощью файлов CSS для вашего проекта.
В вашем вопросе очень мало деталей, но я думаю, что белая часть — это нижний колонтитул сайта. Поскольку у вас нет контента, толкающего нижний колонтитул внизу страницы, он кажется гибким, насколько это возможно.
PS: я совершил Как добавьте динамический класс к тегу body в решении Gatsby.js?, поскольку вам не нужно добавлять динамические классы. Чтобы нижний колонтитул всегда был прикреплен к нижней части браузера, вам нужно внести несколько изменений. Оберните <Layout> чем-то вроде:
import React from "react"
import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"
import '/yourStyles.css'
const Layout = ({ children }) => {
return (
<section className="site-wrapper">
<main>{children}</main>
<Footer />
</section>
)
}
export default Layout
И добавьте следующий CSS (в свой /yourStyles.css или в свои глобальные стили)
.site-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1;
}
По сути, вы говорите оболочке (site-wrapper) расширяться до заполнения области просмотра (100vh). Поскольку ваш тег main (при необходимости измените его на нужный класс) может расти свободно (flex-grow: 1), поэтому ваш нижний колонтитул всегда будет внизу страницы, потому что он подталкивается остальной частью столбца flexbox.
person
Ferran Buireu
schedule
02.01.2021
