Горизонтальная полоса прокрутки в браузерах предлагает пустое пространство справа от моего сайта, что его вызывает? - PullRequest
Новая
       23

Горизонтальная полоса прокрутки в браузерах предлагает пустое пространство справа от моего сайта, что его вызывает?

3 голосов
/ 28 июня 2011

Я разрабатывал этот сайт некоторое время, и внезапно сегодня я заметил, что горизонтальная полоса прокрутки в моем браузере показала и позволяла прокручивать сайт на дюйм или два вправо.

Весь сайт имеет ширину всего 960 пикселей, а мое разрешение экрана составляет 1680 пикселей, поэтому оно должно занимать достаточно места.

Сайт по-прежнему отображается точно так же, но полоса прокрутки меня раздражает. Я пытался добавить границы ко всему, используя селектор * в CSS, но, кажется, ничто не выдвигает этот дополнительный дюйм. Я также использовал консоль Google Chrome для выделения различных разделов сайта, но ни одна из них не вызывает проблемы.

Каждый браузер показывает ту же проблему, у вас есть какие-либо объяснения?

Это сайт, о котором идет речь: http://compressmycode.com/

Ответы [ 3 ]

3 голосов
/ 28 июня 2011

удалите position:relative в вашем стиле #body-wrapper вокруг строки 31 вашего CSS и используйте margin-top:50px вместо top:50px

, если вы должны оставить position:relative, вы также можете просто применитьoverflow:hidden к вашей обертке, чтобы устранить возможное переполнение, но при этом есть некоторые неотъемлемые опасности .

РЕДАКТИРОВАТЬ

ПриПри дальнейшей проверке я обнаружил, что ваша .right div - это проблема.По какой-то причине его перемещение вправо вызывает ваши проблемы.

1 голос
/ 28 июня 2011

Проблема исходит от вашего JS. если вы отключите его, он отлично работает.

Точнее с помощью кнопки facebook: div # body-wrapper> div # site-title> div.right> div.fb-root> div

установка этого параметра на переполнение: скрытый, устраняет проблему

0 голосов
/ 08 ноября 2013

У меня была похожая проблема.Там не было ничего, что казалось бы превышать ширину, но все же была полоса прокрутки внизу.

Моя структура страницы была: 

<body>
  <div id='appContainer'>
    <div class='page'>
       <div>All the content along with "Youtube video"
           which meant there was
           an iframe within my page,
           some other stuff like *sharethis buttons,
           Which meant i had to add a few scripts.</div>
       <div>more stuff</div>
       <div>more fancy stuff</div>
       <div>some more stuff with shadows and floating elements</div>
    </div>
  </div>
</body>

* sharethis :http://www.sharethis.com/#sthash.r7Bx1kDr.dpbs

Я не разделяю CSS, поскольку на внешних уровнях и верхнем поле не было ничего, кроме теней от ящиков.

Хотя я поделюсь с вами, как проблема была решена,Я дал 

<div class='page'></div>

css: 

.page{
  overflow: hidden;
}

Это исправило проблему с прокруткой для меня.Хотя исправление было просто найти правильного родителя и дать ему выше CSS

Я все же хотел бы знать причину прокрутки.Пожалуйста, поделитесь этими знаниями, если они у вас есть.

...