有没有一种方法可以使用视口高度来触发Gatsby上的类？

Question

场景

我正在使用Tailwind CSS在这个Gatsby网站上工作，并且有不同类型的内容。在博客中，整个视口都被占用，并且滚动选项溢出，但是在某些页面中，没有那么多内容，因此需要滚动，我希望页脚固定在页面底部。页。就像演示文稿上的幻灯片一样。标头始终固定在顶部。

“简单解决方案”

我得到的简单解决方案是制作两种页脚，即固定页脚和松散页脚，我可以在对页面进行编码时简单地选择它们，例如<Layout footer="loose">...</Layout>

问题

问题是我并没有真正考虑用户的视口大小和分辨率。在某些浏览器上的测试中，这些“类似幻灯片的页面”位于标题的下面。 您可以在here上进行尝试，但这是它的几个屏幕截图。

此页面具有固定的页脚和“单张幻灯片外观”，但是@ Opera标题位于标题下方

在这种情况下，插入了虚拟内容，因此我们可以使用更长的内容和固定的页脚来测试行为

与上述相同，但页脚较松。

寻求解决方案

因此，我想知道是否可以通过获取页​​面的渲染高度并将其与视口进行比较来提高网站的响应速度，因此将在页脚上激活固定类，使其自动且“更智能” 。此功能可能还会用于其他组件，但这是当前的主要问题。

我发现this article关于如何在不使用CSS的情况下使用断点，但是目标是固定宽度。无论如何，这让我开始思考如何制作一个钩子来获取页面的渲染高度（容器div），将其与视口大小进行比较，并触发一个可以解决该问题的类，也许它将重新加载该值调整屏幕大小。

我不知道针对这种问题的任何解决方法，因此，对此的任何想法或评论将不胜感激。

Answer 1

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

<header class="flex-initial bg-gray-700 text-gray-200 p-6">
  my header
</header>
<main class="flex-1 bg-gray-400 text-gray-800 p-6">
  <h1>HTML Ipsum Presents</h1>

  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

  <h2>Header Level 2</h2>

  <ol>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ol>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
  </blockquote>

  <h3>Header Level 3</h3>

  <ul>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
  </ul>

</main>
<footer class="flex-initial bg-gray-200 text-gray-700 p-6">
  my footer
</footer>