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

问题描述

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

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

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

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

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

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

谁能解释我如何设置html bodyin gatsby 以避免这个大的空白？

Resolution 1366x768边界下的区域是空白

Resolution 1920x1080边界下的区域是空白

标签： javascripthtmlcssgatsbyreact-helmet

解决方案

要添加全局样式（例如您正在谈论的样式），您有多种方法可以遵循。最简单的一种是使用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：我已经提交了 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) 展开直到填满视口 ( 100vh)。由于您的main标签（如果需要，将其更改为所需的类）可以自由增长（flex-grow: 1），因此您的页脚将始终位于页面底部，因为它是由 flexbox 列的其余部分推动的。

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

问题描述

解决方案

推荐阅读