Почему полосы прокрутки на веб-странице?

Question

html {
  background: url(/Users/king/cs50_web/project0/images/nylon_string_original.JPG) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  color: #ffffff;
}

button {
  color: #fff;
  border: none;
  padding: 10px 20px;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  -webkit-transition: background 2s;
  /* For Safari 3.0 to 6.0 */
  transition: background 2s;
  /* For modern browsers */
}

button:hover {
  background: #3cc16e;
}

div {
  min-height: 20px;
}

header {
  padding: 5px;
}

footer {
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  margin-top: -100px;
  padding-top: 2px;
  padding-left: 5px;
  position: relative;
  overflow: auto;
}

nav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

section {
  text-align: center;
  font-family: Arial sans-serif;
  min-height: 100px;
  margin-bottom: 50px;
}

.header_d {
  /*div  header links */
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  min-width: 20%;
  margin: 35px 0 0 80%;
  padding: 2px;
  height: auto;
  position: absolute;
  top: 0;
  box-shadow: 5px 5px 10px #ffffff;
}

.header_p {
  /*div  header links */
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
}

.joe {
  float: right;
  margin: 5px 5px 5px 0;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

#footer_p {
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
  margin-top: 15%;
}

#Joe {
  width: auto;
  height: auto;
  padding: 0px;
  float: right;
  border: 5px solid black;
}

<header>
  <h1>Finger Style Guitar Club</h1>
  <h2>Drop That Pick!</h2>
  <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>

  <div class="header_d">
    <nav>
      <a href="/Users/king/cs50_web/project0/index.html">Home</a>
      <a href="/Users/king/cs50_web/project0/about.html">About</a>
      <a href="/Users/king/cs50_web/project0/chart.html">Chart</a>
      <a href="/Users/king/cs50_web/project0/contact.html">Contact</a>
    </nav>
  </div>
</header>
<section>
  <h1>section</h1>
</section>
<section>
  <h1>section</h1>
</section>
<footer>
  <div id="Joe">
    <img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
  </div>
  <h4>Connect with Joe</h4>
  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <p id="footer_p">Joe Mac &copy; 2020 Joe Mac Inc. All rights reserved.</p>
</footer>

У этого нет полос прокрутки, но я не смог понять, почему:

<header>
  <h1>Finger Style Guitar Club</h1>
  <h2>Drop That Pick!</h2>
  <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>

  <div class="header_d">
    <nav>
      <a href="/Users/king/cs50_web/project0/index.html">Home</a>
      <a href="/Users/king/cs50_web/project0/about.html">About</a>
      <a href="/Users/king/cs50_web/project0/chart.html">Chart</a>
      <a href="/Users/king/cs50_web/project0/contact.html">Contact</a>
    </nav>
  </div>
</header>
<section>
  <h1>section</h1>
</section>
<section>
  <h1>section</h1>
</section>
<footer>
  <div id="Joe">
    <img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
  </div>
  <h4>Connect with Joe</h4>
  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <p id="footer_p">Joe Mac &copy; 2020 Joe Mac Inc. All rights reserved.</p>
</footer>

Answer 1

У вас проблемы с margin: 35px 0 0 80%; на .header_d. Посмотрите на 80%, что означает 80% слева направо, что приводит к переполнению элемента go.

Вместо margin (удалите его), попробуйте установить верх / право следующим образом:

top: 20px;
right: 20px;

Answer 2

исправлена ​​проблема с добавлением следующего стиля к html в стилях 0. css:

top: 20px; справа: 20px;

полосы прокрутки больше не появляются! спасибо всем авторам ...

нашел ответ через поиск в Google, затем: https://css-tricks.com/

Answer 3

Еще один способ объяснить эту проблему заключается в том, что ваш блок header уже имеет ширину 100% относительно вашей страницы. Когда вы присваиваете своему классу header_d левое поле в 80%, а затем определяете его положение как абсолютное, все, что содержится в header_d, имеет левое поле в 80% относительно вашей страницы, а не содержащее header. Это в сочетании с минимальной шириной 20% для header_d вызывает горизонтальное переполнение.

Эта проблема может быть исправлена ​​путем установки ширины header_d и левого поля относительно размера header (например, измените position: absolute; на position: relative), но для этого потребуется переместить header_d при условии, что вы хотите, чтобы он оставался в своей текущей позиции.

Другим исправлением было бы сделать объединенную минимальную ширину header_d и левый край <100%, но относительное расположение должно облегчить его обновление - даже если сейчас потребуется больше работы. </p>

Answer 4

Полосы прокрутки появятся на элементах div или контейнерах на веб-странице, если содержимое внутри слишком велико для контейнера. Например, если фотография имеет ширину 400px и высоту 400px, но размер div / контейнера, в котором она находится (его родительский контейнер), составляет всего 200px на 200px, пользователь должен иметь возможность прокрутки, чтобы увидеть полную фотографию. На ваших сайтах, если имеется больше контента, чем экран может уместиться в текущем виде, появится полоса прокрутки. Возможно, у вас есть несколько больших фотографий или что-то в этом роде.

Хорошо знать, что способ отображения содержимого внутри родительского элемента можно изменить в CSS. Вы делаете это с помощью свойства overflow. Это позволит вам решить, можно ли прокрутить содержимое внутри его родительского элемента, хотите ли вы, чтобы какой-либо переполненный контент был обрезан (скрыт), или если вы хотите, чтобы он перетек по сторонам своего родительского элемента. Подробнее об этом можно прочитать здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

Если вы все еще хотите иметь возможность прокручивать контент, но удалить фактическую полосу прокрутки, в разработке есть функция, которую вы можете Читайте о здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/ :: - webkit-scrollbar

Answer 5

Существует проблема с полем в .header_d , эта часть margin: 35px 0 0 80%; . Размер содержимого элемента больше, чем сам элемент. Помечено место в коде.

html {
  background: url(/Users/king/cs50_web/project0/images/nylon_string_original.JPG) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  color: #ffffff;
}

button {
  color: #fff;
  border: none;
  padding: 10px 20px;
  font: bold 18px sans-serif;
  background: #fd7c2a;
  -webkit-transition: background 2s;
  /* For Safari 3.0 to 6.0 */
  transition: background 2s;
  /* For modern browsers */
}

button:hover {
  background: #3cc16e;
}

div {
  min-height: 20px;
}

header {
  padding: 5px;
}

footer {
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  margin-top: -100px;
  padding-top: 2px;
  padding-left: 5px;
  position: relative;
  overflow: auto;
}

nav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

a:hover {
  background-color: #ddd;
  color: black;
}

a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

section {
  text-align: center;
  font-family: Arial sans-serif;
  min-height: 100px;
  margin-bottom: 50px;
}

.header_d {
  /*div  header links */
  background: url(/Users/king/cs50_web/project0/images/header_wood.jpeg) no-repeat center center fixed;
  background-size: cover;
  min-width: 20%;
  /*margin: 35px 0 0 80%;*/ /*i think, this is the key*/
  margin: 35px 0 0 0;
  padding: 2px;
  height: auto;
  position: absolute;
  top: 0;
  box-shadow: 5px 5px 10px #ffffff;
}

.header_p {
  /*div  header links */
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
}

.joe {
  float: right;
  margin: 5px 5px 5px 0;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left color:#f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: #ffffff;
}

#footer_p {
  text-align: center;
  text-shadow: 5px 5px 10px #ffffff;
  margin-top: 15%;
}

#Joe {
  width: auto;
  height: auto;
  padding: 0px;
  float: right;
  border: 5px solid black;
}

<header>
  <h1>Finger Style Guitar Club</h1>
  <h2>Drop That Pick!</h2>
  <p class="header_p">It's <span><i>gonna</i></span> happen anyway...&#128526;</p>

  <div class="header_d">
    <nav>
      <a href="/Users/king/cs50_web/project0/index.html">Home</a>
      <a href="/Users/king/cs50_web/project0/about.html">About</a>
      <a href="/Users/king/cs50_web/project0/chart.html">Chart</a>
      <a href="/Users/king/cs50_web/project0/contact.html">Contact</a>
    </nav>
  </div>
</header>
<section>
  <h1>section</h1>
</section>
<section>
  <h1>section</h1>
</section>
<footer>
  <div id="Joe">
    <img src="/Users/king/cs50_web/project0/images/jam_smile_fgc175p.jpg" id="jam" alt="Joe Mac">
  </div>
  <h4>Connect with Joe</h4>
  <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a>
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
  <p id="footer_p">Joe Mac &copy; 2020 Joe Mac Inc. All rights reserved.</p>
</footer>