Question

我有两个简单的页面。唯一更改的是<content>标记中的内容。

但是导航栏在两页上的位置并不完全相同。在about.html页面的左侧。导航栏在我的计算机上偏移了〜4px，我需要打开两个标签并在它们之间切换才能看到问题。

我使用最新的Chrome和Firefox浏览器对其进行了测试。只有在浏览器全屏显示的计算机上才会出现此问题。

使用Chrome调试后，我发现了一些奇怪的东西。在首页上，html标签是1513px witdh，另一页是1496px宽？！

主页

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>
 
  <style>
html {
  background-color: white;
}
 
body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
 
a {
  color: #3273dc;
  text-decoration: none;
}
 
a:hover {
  color: #63ccff;
}
 
a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
 
nav a {
  margin-right: 10px;
}
 
footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>
 
<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>
 
</html>

关于页面

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>

  <style>
html {
  background-color: white;
}

body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

a:hover {
  color: #63ccff;
}

a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>

</html>

Answer 1

这是什么原因造成的？

移动不仅仅是导航栏，而是整个body元素。此外，它似乎只是在移动，但实际上正在按预期方式工作。 body边距上的auto值将始终位于body元素的中心。

主页没有任何滚动条，但是关于页面的页面右侧具有垂直滚动条。滚动条占用html元素的某个宽度。结果，您的主页和关于页面中的html元素的宽度是不同的。例如，在我的计算机屏幕上，主页中的html元素的宽度为1149px。同时，关于页面中的html元素的宽度为1132px。如您所见，关于页面中的html宽度较小。请注意，滚动条的宽度可能有所不同，但在我的情况下，其宽度为17px。

因此，我的html元素在关于页面中的宽度较小。 那又是什么？那么，这会导致主页和关于页面中的边距自动值不同（因为关于关于页需要较少的边距来使body元素居中）。结果，它似乎{strong>好像在body元素的移动中。

解决方案＃1

我们该怎么办？最明显的解决方案是可视地隐藏滚动条。您可以通过将html元素赋予scrollbar-width: none来实现。这仍然允许用户滚动（使用鼠标滚轮），但是您根本无法再拖动滚动条（因为它不在视觉上）。在浏览器中运行这两个代码片段，body元素不应移动。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>
 
  <style>
html {
  background-color: white;
}
 
body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
 
a {
  color: #3273dc;
  text-decoration: none;
}
 
a:hover {
  color: #63ccff;
}
 
a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
 
nav a {
  margin-right: 10px;
}
 
footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>
 
<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>
 
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>

  <style>
html {
  background-color: white;
  scrollbar-width: none;
}

body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

a:hover {
  color: #63ccff;
}

a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>

</html>

解决方案2

仅由于滚动条的存在意味着可以滚动页面，因此先前的解决方案可能对用户体验有些不利。没有一个意味着相反。此外，直接拖动滚动条进行滚动也是一种很常见的行为。或者，您可以选择使用其他解决方案。

此解决方案是为html元素提供100vw的宽度（视口宽度的100％）。这意味着即使您的html元素中有一个滚动条，该html元素将保持在滚动条之前的宽度100vw ，滚动条将被添加到html中。但是，这样做会使html元素的宽度大于100vw。现在，其宽度为100vw + scrollbar's width。这将导致html元素的x轴上发生溢出，从而导致出现水平滚动条。我们可以使用overflow-x: hidden删除水平滚动条。

现在，滚动条仍然存在，并且您的body元素未移动。尝试在您的计算机上运行这两个代码片段，您会发现它起作用。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>
 
  <style>
html {
  background-color: white;
  width: 100vw;
  overflow-x: hidden;
}
 
body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
 
a {
  color: #3273dc;
  text-decoration: none;
}
 
a:hover {
  color: #63ccff;
}
 
a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}
 
nav a {
  margin-right: 10px;
}
 
footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>
 
<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Hello</h1>
<p><strong>Nablo</strong> is a light static site generator. It's :</p>
<ul>
<li><strong>Light</strong>.</li>
<li><strong>Fast</strong>.</li>
</ul>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>
 
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    Nablo
  </title>

  <style>
html {
  background-color: white;
  width: 100vw;
  overflow-x: hidden;
}

body {
  margin: auto;
  padding: 20px;
  max-width: 720px;
  text-align: left;
  background-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

a {
  color: #3273dc;
  text-decoration: none;
}

a:hover {
  color: #63ccff;
}

a:visited {
  color: #8559da;
}
h2 a {
  font-weight: 400;
  color: #000;
  text-decoration: none;
}

nav a {
  margin-right: 10px;
}

footer {
  padding: 25px;
  text-align: center;
}
  </style>
</head>

<body>
  <header>
    <h2>
      Nablo
    </h2>
    <nav>
<a href=./home.html>Home</a>
<a href=./docs.html>Docs</a>
<a href=https://google.com>Google</a>
<a href=./about.html>About</a>
    </nav>
  </header>
  <main>
<content>
<h1>Lorem Ipsum</h1>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
<h2>Part 1.10.32</h2>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<h2>Part 1.10.33</h2>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
</content>
  </main>
  <footer>
    Made wih ♥ using nablo
  </footer>
</body>

</html>

Answer 2

区别在于设置margin: auto;会自动使body居中（但是其中一个页面的内容越长，宽度就越小。 >

但是，其中一个页面（首页）的height超过1000像素，而另一个页面（about）的页面height却很低

如果您将css html标签添加以下内容：

html{
    overflow: -moz-scrollbars-vertical; 
    overflow-y: scroll;
}

要强制使垂直滚动始终可见，您将使页面完全相同且不会移动。

您可以通过添加与最长页面min-height相关的内容的content值来实现相同目的，该值通常是未知值，并且对于每个访问者来说，其值可能会因他们的屏幕尺寸而异。

导航栏向左/向右移动

2 个答案:

这是什么原因造成的？

解决方案＃1

解决方案2