Why is the page bigger than the screen?

问题: My name is Jacob and I am a thirteen year old web developer in Arizona. At the moment, I am working on building a website for my uncle's charity, the Conejo Teen Organizati...

问题:

My name is Jacob and I am a thirteen year old web developer in Arizona. At the moment, I am working on building a website for my uncle's charity, the Conejo Teen Organization. I am trying to make all the content fit inside the viewport. However, for some reason it is just a tad bit larger than the screen. A little bit of the content is to the right of the screen, even though I put Can anyone help me know why?

Here is the html and 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>


回答1:

When you set body as width: 100vw, the horizontal scroll is present because of the vertical scroll. Which you can solve by giving max-width: 100% to you body.

Also you've set nav with width: 100vw, wich causes the same problem. Which you can solve by setting width: 100% as you already set body with width 100vw.

/* 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>


回答2:

Good Job for your code, for the next your project don't forget to add normalize css to your code. I have add some style below. Never give up to learn.

/* 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>

  • 发表于 2018-07-06 12:37
  • 阅读 ( 265 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除