为什么页面上会出现垂直滚动条？

时间：2021-07-15 09:55:56

标签： html css flexbox scrollbar overflow

我正在创建一个名为 Catty Music 的示例 flexbox 项目。 我看到的是出现了一个垂直滚动条。我想要做的是有一个固定的 div，底部有播放器控件，高度为 90px 和位于其正上方的可滚动主要内容区域，它将填充视口高度的剩余部分- 没有滚动条。 您可以看到它的快照 HERE 或以下代码段。

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 0;
  font-family: Lato, sans-serif;
  color: #222;
  font-size: 0.9em;
}

main {
  flex: 1 0 auto;
  height: calc(100vh - 90px);
  overflow: auto;
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.music-head {
  display: flex;
  flex: 0 0 280px;
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
  flex: 1 0 auto;
  list-style-type: none;
  padding: 5px 10px 0px;
}

li {
  display: flex;
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%;
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

.catty-music {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1) {
  margin-bottom: auto;
}

.catty-music div:nth-child(2) {
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa {
  font-size: 0.9em;
  padding: 0 0.7em;
}
.catty-music div:nth-child(1) p:first-child {
  font-size: 1.8em;
  margin: 0 0 10px;
}

aside {
  display: flex;
  flex-direction: column;
  flex: 0 0 40px;
  justify-content: space-around;
  align-items: center;
  background-color: #f2f2f2;
}

aside i.fa,
aside i.fab {
  font-size: 0.9em;
}

footer {
  display: flex;
  flex: 0 0 90px;
  padding: 10px;
  color: #fff;
  background-color: rgba(61, 100, 158, 0.9);
}

footer img {
  width: 90px;
}

.footer-current-song-details {
  margin-left: 10px;
  margin-right: auto;
}

.footer-music-controls {
  display: flex;
  width: 50%;
  margin-right: 10px;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 670px) {
  .music-head {
    flex-direction: column;
  }

  .catty-music {
    padding: 0;
  }

  .catty-music * {
    text-align: center;
  }

  .catty-music div:nth-child(1) p:first-child {
    font-size: 1em;
    margin: 10px 0 10px;
  }

  .music-head > img {
    margin: auto;
    max-width: 50%;
  }

  .artist-details,
  .album-details {
    display: none;
  }
}
<main>
  <aside>
    <i class="fa fa-bars"></i> <i class="fa fa-home"></i>
    <i class="fa fa-search"></i> <i class="fa fa-volume-up"></i>
    <i class="fa fa-user"></i> <i class="fab fa-spotify"></i>
    <i class="fa fa-cog"></i> <i class="fab fa-soundcloud"></i>
  </aside>
  <section class="content">
    <div class="music-head">
      <img src="images/cattyboard.jpg" />
      <section class="catty-music">
        <div>
          <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
          <p class="artist-details">Unknown Artist</p>
          <p class="album-details">2016 . Charts . 100 songs</p>
        </div>
        <div>
          <i class="fa fa-play"> Play all</i>
          <i class="fa fa-plus"> Add to</i>
          <i class="fa fa-ellipsis-h"> More</i>
        </div>
      </section>
    </div>
    <ul class="music-list">
      <li>
        <p>1. One Dance</p>
        <p>Crake feat CatKid & Cyla</p>
        <p>2:54</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>2. Panda</p>
        <p>Cattee</p>
        <p>4:06</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>3. Can't Stop the Feeling!</p>
        <p>Catin Cimberlake</p>
        <p>3:56</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>4. Work From Home</p>
        <p>Cat Harmony feat Colla</p>
        <p>3:34</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>1. One Dance</p>
        <p>Crake feat CatKid & Cyla</p>
        <p>2:54</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>2. Panda</p>
        <p>Cattee</p>
        <p>4:06</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
    </ul>
  </section>
</main>
<footer>
  <img src="images/cattyboard.jpg" />
  <div class="footer-current-song-details">
    <p>If It Ain't Love</p>
    <p>Catson Derulo</p>
  </div>
  <div class="footer-music-controls">
    <i class="fa fa-step-backward"></i>
    <i class="fa fa-pause"></i>
    <i class="fa fa-step-forward"></i>
    <i class="fas fa-redo"></i>
    <i class="fa fa-random sm-hide"></i>
  </div>
</footer>

我的计算或浏览器的计算似乎有误。 我看到的是我电脑上的 <main> 和 <footer> 元素的总和是 744px。 window.innerHeight 也给出了 744px。 <html> 元素的高度也为 744 像素。我不知道这个滚动条从哪里出现。 Firefox DevTools 在 <html> 元素上有一个标签，上面写着“此元素导致元素溢出”。 <html> 是根元素，不是吗？那么 <html> 元素使哪个外部元素溢出？

如果有人帮我了解这里发生了什么，我会很高兴。

1 个答案:

答案 0 :(得分：1)

您忘记了页脚中的 padding: 10px。因此，您必须将 main 的计算更改为 height: calc(100vh - 110px) (90px + 2x 10px)。

工作示例：

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  margin: 0;
  font-family: Lato, sans-serif;
  color: #222;
  font-size: 0.9em;
}

main {
  flex: 1 0 auto;
  height: calc(100vh - 110px);
  overflow: auto;
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.music-head {
  display: flex;
  flex: 0 0 280px;
  padding: 40px;
  background-color: #4e4e4e;
}

.music-list {
  flex: 1 0 auto;
  list-style-type: none;
  padding: 5px 10px 0px;
}

li {
  display: flex;
  padding: 0 20px;
  min-height: 50px;
}

li p {
  flex: 0 0 25%;
}

li span.catty-cloud {
  border: 1px solid black;
  font-size: 0.6em;
  padding: 3px;
}

li:nth-child(2n) {
  background-color: #f2f2f2;
}

.catty-music {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  font-weight: 300;
  color: #fff;
  padding-left: 50px;
}

.catty-music div:nth-child(1) {
  margin-bottom: auto;
}

.catty-music div:nth-child(2) {
  margin-top: 0;
}

.catty-music div:nth-child(2) i.fa {
  font-size: 0.9em;
  padding: 0 0.7em;
}
.catty-music div:nth-child(1) p:first-child {
  font-size: 1.8em;
  margin: 0 0 10px;
}

aside {
  display: flex;
  flex-direction: column;
  flex: 0 0 40px;
  justify-content: space-around;
  align-items: center;
  background-color: #f2f2f2;
}

aside i.fa,
aside i.fab {
  font-size: 0.9em;
}

footer {
  display: flex;
  flex: 0 0 90px;
  padding: 10px;
  color: #fff;
  background-color: rgba(61, 100, 158, 0.9);
}

footer img {
  width: 90px;
}

.footer-current-song-details {
  margin-left: 10px;
  margin-right: auto;
}

.footer-music-controls {
  display: flex;
  width: 50%;
  margin-right: 10px;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 670px) {
  .music-head {
    flex-direction: column;
  }

  .catty-music {
    padding: 0;
  }

  .catty-music * {
    text-align: center;
  }

  .catty-music div:nth-child(1) p:first-child {
    font-size: 1em;
    margin: 10px 0 10px;
  }

  .music-head > img {
    margin: auto;
    max-width: 50%;
  }

  .artist-details,
  .album-details {
    display: none;
  }
}
<main>
  <aside>
    <i class="fa fa-bars"></i> <i class="fa fa-home"></i>
    <i class="fa fa-search"></i> <i class="fa fa-volume-up"></i>
    <i class="fa fa-user"></i> <i class="fab fa-spotify"></i>
    <i class="fa fa-cog"></i> <i class="fab fa-soundcloud"></i>
  </aside>
  <section class="content">
    <div class="music-head">
      <img src="images/cattyboard.jpg" />
      <section class="catty-music">
        <div>
          <p>CattyBoard Top 100 Single Charts (11.06.36)</p>
          <p class="artist-details">Unknown Artist</p>
          <p class="album-details">2016 . Charts . 100 songs</p>
        </div>
        <div>
          <i class="fa fa-play"> Play all</i>
          <i class="fa fa-plus"> Add to</i>
          <i class="fa fa-ellipsis-h"> More</i>
        </div>
      </section>
    </div>
    <ul class="music-list">
      <li>
        <p>1. One Dance</p>
        <p>Crake feat CatKid & Cyla</p>
        <p>2:54</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>2. Panda</p>
        <p>Cattee</p>
        <p>4:06</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>3. Can't Stop the Feeling!</p>
        <p>Catin Cimberlake</p>
        <p>3:56</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>4. Work From Home</p>
        <p>Cat Harmony feat Colla</p>
        <p>3:34</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>1. One Dance</p>
        <p>Crake feat CatKid & Cyla</p>
        <p>2:54</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
      <li>
        <p>2. Panda</p>
        <p>Cattee</p>
        <p>4:06</p>
        <p><span class="catty-cloud">CATTY CLOUD SYNC</span></p>
      </li>
    </ul>
  </section>
</main>
<footer>
  <img src="images/cattyboard.jpg" />
  <div class="footer-current-song-details">
    <p>If It Ain't Love</p>
    <p>Catson Derulo</p>
  </div>
  <div class="footer-music-controls">
    <i class="fa fa-step-backward"></i>
    <i class="fa fa-pause"></i>
    <i class="fa fa-step-forward"></i>
    <i class="fas fa-redo"></i>
    <i class="fa fa-random sm-hide"></i>
  </div>
</footer>

相关问题
最新问题