Gatsby: [v2]额外的div包装器

@ reach / router添加了它，因此它可以自动管理焦点，以确保屏幕阅读器可以使用站点。

https://reach.tech/router/accessibility

我意识到这很愚蠢，但我认为如果只有一个包装div会更好。

到达div似乎没有什么特别之处，也许可以通过在其中添加html属性来将到达div与包装的id="___gatsby" div合并起来？

不幸的是，不可能将两者合并。 也许您可以对它们使用@ reach / router，以重新使用安装React的div。

我需要在上面添加height: 100% ，但是上面没有class或id 。 我尝试在应用程序中寻找它，但找不到它。 您能告诉我如何在其中添加id吗？

@colmtuite这不是理想的方法，但是由于分组div是<div id="___gatsby">的唯一子对象，您可以通过

#___gatsby > * {
  height: 100%;
}

更新：更好的解决方案可能是使用@ironblock这里建议的更具体的选择器。

div[role="group"][tabindex] {
  height: 100%;
}

更新2 ：回到2018年，情况并非如此，但如今，有问题的div的ID为gatsby-focus-wrapper 。 因此，选择器可能会变得晦涩难懂：

#gatsby-focus-wrapper {
  height: 100%;
}

相关问题： https ：

我个人认为这是错误的做法，对于那些不使用样式化组件的人来说，这是问题的根源。

@kaishin您能否扩展您的意思？ 到底是什么被误导了？

@janosh我的意思是到达/路由器维护者的决定不提供禁用或至少自定义此包装div的方法。 我是语义HTML的大力支持者，我不得不面对另一个包装器div，这只是我对面对这个问题之前几乎不了解的库的一个钩子。

我现在理解您的观点，并且非常同意。 对于非语义标记，我有很多相同的看法。
您的评论结尾让我感到困惑

...是那些不使用样式化组件的人的问题根源

因为我不明白为什么使用styled-components _are_的人不会受到影响。

我不敢相信如此合理的解决方案已经解决了这个问题。

@ danielo515嗯，问题出在依赖上，所以有点可以理解。

此注释提供了CSS解决方法： https :

因为我不明白为什么使用样式组件的人不会受到影响。

@janosh自从我打开此问题以来，我对样式没有任何问题。 那么，实际上这是什么问题呢？

@LekoArts Unsemantic标记破坏了CSS解决方案，即使在没有足够内容的情况下也可以将页脚保留在窗口底部。 使用styled-components并知道解决方法CSS选择器不会使包装器div变得更加语义化。

在本地，当您单击身体上的某个位置，然后按Tab键时，它将聚焦最近的可聚焦元素。 但是，此包装器意味着单击主体将使包装器聚焦，将制表符顺序重置为开头，而不是元素附近。 我不确定这是否是可访问性问题，但这是我在单击元素附近并按Tab键使其聚焦时注意到的东西。

@colmtuite考虑使用高度：100vh;

@skinenbayev @colmtuite
或使用flex

div[role="group"][tabindex] {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@Schmerb我认为将100vh设置为CSS专用类比处理某些生成的代码更方便。

@skinenbayev
我想我应该澄清一下... 100vh很棒，如果您希望您的应用具有与视口相同大小的固定高度...

但是，如果您需要该应用占用所有可用空间

（基本上，每个拥有height: 100%都在尝试尝试，但是很可能由于父母的高度没有设置而失败）

然后Flexbox进行营救。

为了进一步阐明我的具体情况，以下是两次尝试的屏幕截图：
蓝色/橙色边框是/page组件。 Gatsby放置的随机“ hook” div是空白。 使用height: 100vh可以看到空白区域远远延伸到视口底部以下...即使页面本身本质上没有内容，也可以将页脚推离页面。

使用flex主轴切换（ flex-direction: column而不是默认的flex-direction: row ）和flex-grow属性，您可以看到它很好地占据了所有可用空间。

与height: 100vh;

与 display: flex; flex-direction: column; flex-grow: 1;

我所看到的只是解决此问题的方法，甚至不应该存在。
如果您的目标浏览器不支持flexbox怎么办？

设置`height：100vh'时，我也遇到了一个问题，需要滚动时，我在chrome中得到了一个双滚动条。

我解决类似问题的方法不是使用height: 100vh; ，而是将min-height: 100vh;到包装的Layout组件中。 当您将其与设置结合起来时：
grid-template-areas: 'Header' 'Content' 'Footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;

现在，包装组件将始终至少为视口的高度，但是如果内容足够大以至于需要滚动，则将推动页脚元素以保留在屏幕底部。

但是（不幸的是！），grid对浏览器的支持少于flexbox，但个人感觉就不那么“ hacky”。

也许不是对缺乏弹性支持有所帮助的答案，但是也许是一种使页脚停留在页面底部的更整洁的方法？

不幸的是，尽管所讨论的代码行解决了可访问性，但它也会导致可访问性错误。 我已经在https://github.com/reach/router/issues/257中记录了一个问题

请注意， 100vh可能与Android浏览器有所不同。
快速谷歌搜索显示示例： https ：

由于某种原因， div[role="group"][tabindex]不会对该div应用任何样式。 我必须指定ID #gatsby-focus-wrapper

仍然没有合理的解决高度问题的方法？