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

Question

我遇到了网页右侧和底部出现大空白的问题。测试网页的响应能力时。

我在stackoverflow上发现了类似的问题

1. 当背景图像应延伸页面的整个长度时，页面右侧会出现空白[关闭]

2. 当浏览器调整为较小的窗口时，网站页面右侧出现奇怪的空白

两个帖子的解决方案都是一样的

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

我不知道在哪里添加这个gatsby，我发现了一个与我的问题类似的帖子，关于gatsby 如何设计主体/背景的样式？。似乎不明白这个问题的解决方案是什么！

找到这篇文章How to add adynamic class to body tag in Gatsby.js? 对使用有一些想法react-helmet，我到底可以如何使用它？

谁能解释我如何html body在盖茨比中设置，以避免这个大的空白？

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';

基本上，您正在使用 CSS 文件为您的项目添加全局样式。

您的问题非常缺乏细节，但我猜白色部分是网站的页脚。由于页面底部没有任何内容推动页脚，因此它看起来很灵活。

PS：我已经提交了如何将动态类添加到 Gatsby.js 中的 body 标记？的解决方案，因为您不需要添加动态类。为了使页脚始终粘在浏览器底部，您需要进行一些调整。用类似的东西包裹你的<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 列的其余部分推动的。