时间戳

首页 > 解决方案 > 刷新与调整浏览器窗口大小时网格布局呈现不同

html - 刷新与调整浏览器窗口大小时网格布局呈现不同

问题描述

我刚开始使用网格布局，并注意到它在相同的视口大小上呈现不同：

(1) 最大化窗口的初始显示，这里没什么特别的： 在此处输入图像描述

(2) 使用按钮调整浏览器窗口大小后在此处输入图像描述，左侧边栏中的文本将被换行： 在此处输入图像描述

(3) 刷新浏览器窗口而不改变其大小后，左侧边栏中的换行被移除： 注意左侧边栏中的文本突然不再换行，而视口大小仍然相同！在此处输入图像描述

这个怎么可能？我在 Windows 上使用 Chrome 89.0.4389.82（最新稳定版）。使用 Firefox 86 我也有奇怪的大小调整效果（在小窗口上换行，并且在最大化时换行不会被删除）。想知道两个主要浏览器在简单网格上可能有错误吗？我做错了什么/失踪了吗？

使用的 CSS/HTML：

<style type="text/css">
  body {
    height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-template-columns: auto minmax(0, 1fr);
  }

  header {
    background-color: #add790;
    text-align: center;
    grid-column: span 2;
  }

  nav {
    background-color: orange;
    overflow: auto;
    padding: 1em;
  }

  article {
    overflow: auto;
    padding: 1em;
  }
</style>

<header>
  <h1>Title</h1>
</header>
<nav>
  <p>Navigation</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
  <p>Some text.</p>
</nav>
<article>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
  <p>Here too there should be a local scrollbar.</p>
</article>

更新：添加nav > p { min-width: max-content; }规则：

调整窗口大小 在此处输入图像描述 后：点击刷新后： 在此处输入图像描述 注意文本和滚动条之间的红色标记间隙。

更新 2：与width: fit-content;for nav: before refresh: 在此处输入图像描述 after refresh: 在此处输入图像描述 所以导航栏保持完全相同的大小，但主要内容位置发生了变化。

标签： htmlcssgoogle-chromefirefoxcss-grid

解决方案

抱歉，这是一个较长的描述。描述“为什么”并不容易，即使 Chrome 和 Firefox 之间存在不同的行为，并且在浏览器本身中再次出现具有不同行为的不同浏览器事件。

简短：原因

auto“奇怪”行为的原因是浏览器使用网格或表格自动计算列宽的（不同）方式。但是您看到的是（由浏览器编码人员）预期的浏览器行为。是的：这会让某人发疯...... ;-)

更长：为什么/会发生什么？

一般基础：在您的示例中auto width，导航列是根据最宽的元素计算的：“导航”一词。自己检查一下：当您使用文本“一些文本更多单词”使第二个元素更长时，导航栏的宽度会发生变化。

Chrome 中的解释行为

在全屏上，窗口的高度足够高，因此导航不需要垂直滚动条。使用窗口按钮使窗口不那么高，因此导航栏中的内容有垂直溢出。浏览器现在添加了垂直滚动条......滚动条发生在导航部分......但由于未知原因，Chrome 没有在该事件中添加自动宽度的重新计算。滚动条只是添加到导航部分。至于这个，现在内容包装的内容的位置更少了。（注意：“导航”这个词不能换行，现在进入填充。所以它似乎有足够的地方，但事实并非如此。）

当您现在重新加载页面时，它是另一个浏览器事件。您从开始加载页面，浏览器从开始计算自动宽度。在这种情况下，他从一开始就检测到需要滚动条，并且 Chrome 中的自动宽度计算包括滚动条的宽度到导航部分的宽度。

在这种情况下重新加载时，您可以观察到：导航部分变得稍宽。

Firefox 中的解释行为（略有不同）

在 Firefox 中全屏显示与在 Chrome 中相同。足够的导航高度，因此没有垂直滚动条。在 Firefox 中使用窗口按钮缩小窗口与在 Chrome 中几乎相同：将现在需要的垂直滚动条添加到导航中，并且没有明显重新计算自动宽度。但似乎仍然需要重新计算，因为当 Firefox 识别出导航部分的内容比自动宽度空间更宽时，它额外添加了一个水平滚动条。

最大的不同是现在的重新加载事件。与 Chrome 相同：Firefox ('re-') 计算自动宽度。但是在 Firefox 中没有任何变化......那是因为 Firefox 总是在没有滚动条的情况下计算自动宽度，并且只将其添加到内部空间容器中......丑陋......但它就是这样。

调整窗口高度时自己检查该行为

如果您使用另一个浏览器事件，您可以确认：只需通过用鼠标跟踪窗口边缘来调整窗口高度。在该事件中，两个浏览器都会重新计算自动宽度。如果新高度使导航栏滚动 Chrome 会添加滚动条并使导航部分更宽。Firefox 添加了滚动条，但将其放置在导航部分的内部，这意味着导航部分的宽度保持不变。

注意：如果您在导航部分删除一些内容行，更容易观察效果。

简短的可能解决方案：
仅 3 处更正

  1. 向导航部分添加15px额外的填充，以便 Firefox 有足够的空间来放置滚动条。

  2. 将溢出更改为overflow-y: auto并overflow-x: hidden避免 Firefox 中可能出现的水平滚动条

  3. 避免不必要的导航元素换行。在您的情况下，您有内联内容（元素中的普通文本p）。只需添加nav > p { white-space: nowrap }. 现在文本不能换行，自动宽度计算采用最宽的文本元素。如果您现在向导航中的某个元素添加更多单词，则可以检查它，即<p>Some text with more words.</p>.

:::
一个很长的解释，但是......
只有三个更正......就是这样
！

见例子。

body {
  height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto minmax(0, 1fr);
}

header {
  background-color: #add790;
  text-align: center;
  grid-column: span 2;
}

nav {
  background-color: orange;
  padding: 1em;
  padding-right: calc(1em + 15px);  // added space scrollbar Firefox
  overflow-x: hidden;
  overflow-y: auto;
}
nav > p {
  white-space: nowrap;
}

article {
  overflow: auto;
  padding: 1em;
}
<header>
    <h1>Title</h1>
</header>
<nav>
    <p>Navigation</p>
    <p>Some text with more words.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
    <p>Some text.</p>
</nav>
<article>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
    <p>Here too there should be a local scrollbar.</p>
</article>

更新：解决方案描述中的修正。更改了溢出-Y/-X 的错误值。例如，他们是正确的。

更新的代码
更正了注释中提到的设置为导航部分（在代码中标记）的填充。

推荐阅读