javascript - 如何以及在哪里访问 gatsby 中的 html 正文

Question

我遇到了网页右侧和底部出现大空白的问题。在测试网页的响应性时。
我在stackoverflow上发现了类似的问题

White space showing up on right side of page when background image should extend full length of page [closed]

Website has strange whitespace on right side of the page when the browser is resized to a smaller window

两个帖子中的解决方案都相同

html, 
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
}

我不知道在 gatsby 中的确切位置添加它，我发现一篇与我的关于 gatsby 的问题相似的帖子 How do I style the body / background? .似乎不明白这个问题的解决方案是什么!
找到这篇文章 How to add a dynamic class to body tag in Gatsby.js?对使用 react-helmet 有了一些想法，我该如何使用它？
谁能解释我如何设置 html body在 Gatsby 中，为了避免这个大的空白？ Resolution 1366x768边界下的区域是空白
Resolution 1920x1080边界下的区域是空白

Answer 1

要添加全局样式(例如您正在谈论的样式)，您有多种方法可以遵循。最简单的一种是使用 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';

基本上，你是 adding global styles为您的元素使用 CSS 文件。
您的问题非常缺乏细节，但我猜白色部分是网站的页脚。由于您没有任何内容插入页面底部的页脚，因此它看起来很灵活。
P.S:我已经 promise How to add a dynamic class to the body tag in 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 )展开直到填满视口(viewport)( 100vh )。由于您的 main标签(如果需要，将其更改为所需的类)可以自由增长( flex-grow: 1 )，因此您的页脚将始终位于页面底部，因为它是由 flexbox 列的其余部分插入的。