为什么页面比屏幕大？

Question

Whosebug 社区，您好！我现在正在做一个重大项目，遇到了一些困难。我试图让所有内容都适合视口。但是，由于某种原因，它只是比屏幕大一点点。有一点内容在屏幕的右边，尽管我放了谁能帮我知道为什么吗？

这里是 html 和 css:

/* Whole Page or not one specific section */
main {
  text-align: center;
}

body {
  width: 100vw;
  height: 100%;
  margin-left: 0px;
  margin-right: 0px;
}

/* Top Bar */
#temp-logo, #donate-top {
  display: inline-block;
}

#donate-top {
  float: right;
}


.topbar {
  display: block;
  background-color: black;
  color: white;
}

/* Nav Bar */
nav {
  text-align: center;
  width: 100vw;
}

/* Gallery */
.img {
  width: 20vw;
  height: 20vw;
}

.desc {
  display: inline-block;
  position: relative;
  margin: 1%;
}

.desc:hover img {
  filter: blur(1.5px) brightness(60%);
  transition: 0.3s;
  box-shadow: 0 0 10px gray;
}

.desc :not(img) {
  position: absolute;
  top: 37%;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #FFF;
  opacity: 0;
  transition: 0.3s;
}

.desc:hover :not(img) {
  opacity: 1;
}

.img:hover {
  transform: scale(1.1);
}

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    <title>Conejo Teen Organization</title>
  <body>
    <!-- Top Bar -->
    <div class="topbar">
      <!-- Get logo ASAP -->
      <p id="temp-logo"><em>Conejo Teen Organization</em></p>
      <a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
    </div>
    <!-- Nav -->
    <nav>
      <a id="mission" class="link" href="#">Mission</a>
      <a id="about" class="link" href="#">About Us</a>
      <a id="donations" class="link" href="#">What We Do</a>
      <a id="contact" class="link" href="#">Contact</a>
    </nav>
    <!-- Main -->
    <main>
      <!-- First Section -->
      <section id="home-screen">
        <h1 id="h1">Conejo Teen Organization</h1>
        <p id="h1-desc">Helping California teens in need since 2017</p>
        <button id="donate-home" class="donate">Donate Now!</button>
      </section>
      <!-- Our Mission -->
      <section id="mission">
        <h2 id="mission-h2">Our Mission</h2>
        <p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
      </section>
      <!-- Image Gallery (images of projects) -->
      <section id="gallery">
        <h2 id="images">Gallery</h2>
        <!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
        <div class="row1 row">
          <!-- Image 1 -->
          <div class="desc-1 desc">
            <img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 2 -->
          <div class="desc desc-2">
            <img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 3 -->
          <div class="desc desc-1">
            <img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer>
      <p id="copyright">&copy 2018 Conejo Teen Organization</p>
      <p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
    </footer>
  </body>
</html>

Answer 1

当你设置body为width:100vw时，由于有垂直滚动，所以出现了水平滚动。你可以通过给你 max-width: 100% body.

来解决

您还设置了 nav 和 width: 100vw，导致同样的问题。你可以通过设置 width: 100% 来解决这个问题，因为你已经设置了宽度为 100vw 的 body。

/* Whole Page or not one specific section */
main {
  text-align: center;
}

body {
  width: 100vw;
  height: 100%;
  margin-left: 0px;
  margin-right: 0px;
  max-width: 100%;
}

/* Top Bar */
#temp-logo, #donate-top {
  display: inline-block;
}

#donate-top {
  float: right;
}


.topbar {
  display: block;
  background-color: black;
  color: white;
}

/* Nav Bar */
nav {
  text-align: center;
  width: 100%;
}

/* Gallery */
.img {
  width: 20vw;
  height: 20vw;
}

.desc {
  display: inline-block;
  position: relative;
  margin: 1%;
}

.desc:hover img {
  filter: blur(1.5px) brightness(60%);
  transition: 0.3s;
  box-shadow: 0 0 10px gray;
}

.desc :not(img) {
  position: absolute;
  top: 37%;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #FFF;
  opacity: 0;
  transition: 0.3s;
}

.desc:hover :not(img) {
  opacity: 1;
}

.img:hover {
  transform: scale(1.1);
}

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    <title>Conejo Teen Organization</title>
  <body>
    <!-- Top Bar -->
    <div class="topbar">
      <!-- Get logo ASAP -->
      <p id="temp-logo"><em>Conejo Teen Organization</em></p>
      <a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
    </div>
    <!-- Nav -->
    <nav>
      <a id="mission" class="link" href="#">Mission</a>
      <a id="about" class="link" href="#">About Us</a>
      <a id="donations" class="link" href="#">What We Do</a>
      <a id="contact" class="link" href="#">Contact</a>
    </nav>
    <!-- Main -->
    <main>
      <!-- First Section -->
      <section id="home-screen">
        <h1 id="h1">Conejo Teen Organization</h1>
        <p id="h1-desc">Helping California teens in need since 2017</p>
        <button id="donate-home" class="donate">Donate Now!</button>
      </section>
      <!-- Our Mission -->
      <section id="mission">
        <h2 id="mission-h2">Our Mission</h2>
        <p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
      </section>
      <!-- Image Gallery (images of projects) -->
      <section id="gallery">
        <h2 id="images">Gallery</h2>
        <!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
        <div class="row1 row">
          <!-- Image 1 -->
          <div class="desc-1 desc">
            <img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 2 -->
          <div class="desc desc-2">
            <img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 3 -->
          <div class="desc desc-1">
            <img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer>
      <p id="copyright">&copy 2018 Conejo Teen Organization</p>
      <p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
    </footer>
  </body>
</html>

Answer 2

你的代码做得很好，对于你的下一个项目，不要忘记将规范化 css 添加到你的代码中。我在下面添加了一些样式。永不放弃学习。

/* Whole Page or not one specific section */
main {
  text-align: center;
}

body {
  width: 100%;
  overflow-x: hidden;      
  margin-left: 0px;
  margin-right: 0px;
}

/* Top Bar */
#temp-logo, #donate-top {
  display: inline-block;
}

#donate-top {
  float: right;
}


.topbar {
  display: block;
  background-color: black;
  color: white;
  padding: 0 20px;
}

/* Nav Bar */
nav {
  text-align: center;
  width: 100%;
}

/* Gallery */
.img {
  width: 20vw;
  height: 20vw;
}

.desc {
  display: inline-block;
  position: relative;
  margin: 1%;
}

.desc:hover img {
  filter: blur(1.5px) brightness(60%);
  transition: 0.3s;
  box-shadow: 0 0 10px gray;
}

.desc :not(img) {
  position: absolute;
  top: 37%;
  z-index: 1;
  text-align: center;
  width: 100%;
  color: #FFF;
  opacity: 0;
  transition: 0.3s;
}

.desc:hover :not(img) {
  opacity: 1;
}

.img:hover {
  transform: scale(1.1);
}

<!DOCTYPE html>
<html>
  <head>
    <!-- it's first to normalize style before your style -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet"> 
    <link href="main.css" rel="stylesheet">
    <title>Conejo Teen Organization</title>
  <body>
    <!-- Top Bar -->
    <div class="topbar">
      <!-- Get logo ASAP -->
      <p id="temp-logo"><em>Conejo Teen Organization</em></p>
      <a id="donate-top" class="donate"><p class="donate-name">Donate</p></a>
    </div>
    <!-- Nav -->
    <nav>
      <a id="mission" class="link" href="#">Mission</a>
      <a id="about" class="link" href="#">About Us</a>
      <a id="donations" class="link" href="#">What We Do</a>
      <a id="contact" class="link" href="#">Contact</a>
    </nav>
    <!-- Main -->
    <main>
      <!-- First Section -->
      <section id="home-screen">
        <h1 id="h1">Conejo Teen Organization</h1>
        <p id="h1-desc">Helping California teens in need since 2017</p>
        <button id="donate-home" class="donate">Donate Now!</button>
      </section>
      <!-- Our Mission -->
      <section id="mission">
        <h2 id="mission-h2">Our Mission</h2>
        <p id="mission-statement">Our goal is to identify organizations and individuals in need, and assist in the most effective and appropriate way. In addition, the specific objective and purpose of Conejo Teen Organization shall be to provitde teens in an opportunity to learn about, perform and be engaged in community service activities. We want to provide a safe outlet and positive culture for teens to engage with other like-minded teens and mentors.</p>
      </section>
      <!-- Image Gallery (images of projects) -->
      <section id="gallery">
        <h2 id="images">Gallery</h2>
        <!-- Put service images here. On hover, enlarge image and put text overlay with link to that project -->
        <div class="row1 row">
          <!-- Image 1 -->
          <div class="desc-1 desc">
            <img src="Gallery/DecMyRoom-1-Edit.jpg" class="img img-1">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 2 -->
          <div class="desc desc-2">
            <img src="Gallery/DecMyRoom-2-Edit.jpg" class="img img-2">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
          <!-- Image 3 -->
          <div class="desc desc-1">
            <img src="Gallery/DecMyRoom-3-Edit.jpg" class="img img-3">
            <h3 id="img-desc">Dec My Room</h3>
          </div>
        </div>
      </section>
    </main>
    <!-- Footer -->
    <footer>
      <p id="copyright">&copy 2018 Conejo Teen Organization</p>
      <p id="my-credit">Created by <a href="#">Jacob Pieczynski</a></p>
    </footer>
  </body>
</html>

为什么页面比屏幕大？

Why is the page bigger than the screen?

css

html

width

screen

viewport