具有特定视口宽度的视口高度之外的额外空间答案

【问题标题】：Extra space beyond viewport height with certain viewport widths具有特定视口宽度的视口高度之外的额外空间
【发布时间】：2019-01-12 19:39:14
【问题描述】：

我遇到了一个问题，即我在一页的末尾有空格。据我所知，没有元素占据空间。该空间仅在视口设置为特定宽度时出现。例如，它出现在宽度 940 和 400 左右，但不是 550 或非常宽。

起初我以为是我的固定导航元素妨碍了我，但我想我已经排除了这种可能性。任何想法可能导致空间？它只发生在一页上。

整个网站可以在这里找到：https://github.com/NuriAmari/gina-hsu-portfolio

演示地址：https://nuriamari.github.io/gina-hsu-portfolio/

有问题的页面是 index.html。不知道如何更方便地发布我的代码，但如果我需要更改某些内容，请告诉我。提前致谢。

【问题讨论】：

标签： javascript html css sass flexbox

【解决方案1】：

唷，这需要一些挖掘。

问题似乎是由项目图块中的文本引起的。

在您的* CSS 选择器或任何影响您的图块的选择器中包含font-family: "Helvetica Neue", "Helvetica", "Open Sans", sans-serif;（或任何字体系列集）会导致问题，因为它会使文本变大。

原因是因为在一定宽度上，文本会溢出到两行，发疯，并导致额外的空白。

我假设您希望保持相同的font-family，您只需在body .content #projects > div a 选择器上弄乱font-size: 5rem;。 3rem 足以让它与所有东西兼容，直到它达到移动尺寸，但当然你可以使用媒体查询来保持它的任何尺寸，只要它不超过两行（因为它太大了适合瓷砖尺寸）。我相信您知道，但您可能需要整体更改/修复这些图块中的文本

很高兴为您提供帮助，如果您可以实现，请告诉我。

不过，为了将来参考，也许在你的问题背后给出更多解释，但我能够弄清楚。

【讨论】：

谢谢，这行得通。好的，我以后会尝试更具体的。

【解决方案2】：

只需从body .content #projects > div a 中删除line-height: 50vw css 属性，即可在style.scss 的194 行中找到。现在你可以开始了。

【讨论】：

好发现，阿米特。但是，它可以将文本放置在每张图片的底部。显然，这不是最好的解决方案。