flexed overflow-y 上的滚动条与其他元素不对齐答案

【问题标题】：Scroll bar on flexed overflow-y misaligns it from other elementsflexed overflow-y 上的滚动条与其他元素不对齐
【发布时间】：2020-10-06 02:23:21
【问题描述】：

相当大的 sn-p 但这是我正在处理的网站的基本布局，问题实际上非常简单 - 我使用的是宽度容器，导航栏和主要元素的宽度相同 - 一切对齐很好，除非我使用 overflow-y: auto 在 main 元素上创建滚动条。

由于滚动条，主体的中心现在短了几个像素。

有没有办法阻止浏览器在出现滚动条时自动调整视图的中心？

我还没有在其他浏览器上测试过，但我在 Firefox 上看到了这个，我只是想知道是否有适用于所有浏览器的简单修复，或者它是否只是我们必须忍受的东西。

这里添加了溢出：

这里没有：

您可以看到导航栏中居中的白色部分与主体居中的浅灰色部分未对齐。

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}

<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

【问题讨论】：

标签： javascript html css

【解决方案1】：

我做了一个小把戏。首先，我将overfloy-y: scroll 添加到header，使其具有相同的滚动条。如您所见：

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
  overflow-y: scroll;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}

<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

然后我把滚动条隐藏在header中。

（是的，它不适用于 Firefox。）

html {
  height: 100%;
  font-size: calc(1em + 1vw);
}

body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  flex-direction: column;
  background-color: #ccc;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px;
  z-index: 1000;
  overflow-y: scroll;
}

header::-webkit-scrollbar{
  visibility:hidden;
}

main {
  display: flex;
  overflow-y: auto;
  justify-content: center;
  flex: 1 0 0px;
}

.navTop-widthContainer {
  max-width: 536px;
  flex: 1 0 0px;
  display: flex;
  background-color: #fff;
}

.navTop {
  display: inline-flex;
  flex-direction: row;
  flex: 1 0 auto;
  flex-shrink: 0;
}

.navTop div {
  display: flex;
}

.floatRight {
  margin-left: auto;
  order: 2;
}

.f-d {
  display: flex;
  flex-direction: column;
}

.f-d div {
  display: flex;
  justify-content: center;
}

.widthContainer {
  max-width: 536px;
  background-color: #eee;
  border-left: solid 1px #ddd;
  border-right: solid 1px #ddd;
  color: #242424;
}

<body>
  <header>
    <div class="navTop-widthContainer">
      <nav id="navTop" class="navTop" role="navigation">
        <div>
          <a href="/Services">Services</a>
          <a href="/Customer">Shopping</a>
        </div>

        <div class="floatRight">
          <a id="register" href="/Identity/Account/Register">Register</a>
          <a id="login" href="/Identity/Account/Login">Login</a>
        </div>
      </nav>
    </div>
  </header>

  <main>
    <div class="widthContainer f-d">
      <div>
        <p>Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill
          text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text Fill text
          Fill text Fill text Fill text Fill text Fill text Fill text</p>
      </div>
    </div>
  </main>
</body>

【讨论】：

赞成，因为这是一个很好的建议 - 我曾考虑为其添加滚动条，但不知道我可以隐藏它（顺便说一句，当我运行 sn- p) - 同样在主要overflow:auto; 不会导致滚动条的情况下，因为内容很短，这会给我留下同样的问题，除非反过来！
我认为实际上我在这里唯一真正的解决方案是，由于不同浏览器上滚动条的宽度不同，是使导航栏上的宽度比页面的其余部分小一点，所以它不会看起来很明显，它偏离了中心
我认为只有javascript才能提供真正的解决方案。
实际上我刚刚找到了一个很好的解决方案：padding-left: calc(100vw - 100%); 应用于我的main 元素，在另一个线程上：stackoverflow.com/questions/1417934/… - 这意味着我必须重新考虑 widthcontainer 的背景颜色，但那是美好的。我将在宽度容器内创建另一个 div。