Почему моя страница показывает горизонтальную полосу прокрутки на маленьком экране?

Question

У меня отзывчивый HTML page, и он показывает полосу прокрутки, когда ширина меньше, чем 691px, как скрыть эту полосу прокрутки? Что заставляет эту полосу прокрутки появляться?

Answer 1

У вас есть тонкий CSS эффект, так как вы стиль ваших footer элемента.

В нижнем колонтитуле (который абсолютно расположен) у вас есть два дочерних элемента: nav и #copy, оба из которых используют абсолютное позиционирование.

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

В одном правиле footer #copy вы установили left: 50% и ребенка DIV footer #copy p установить position: relative, left: -50%.

Сдвиг вещей налево на 50%, а затем назад на 50% не совсем отменяет и, как результат, один из этих элементов имеет ширину, которая вычисляет значение, которое вызывает условие переполнения, следовательно полосу прокрутки.

Нет никакого реального способа исправить это, потому что CSS слишком сложно для того, что вы пытаетесь сделать.

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

Вы можете скрыть полосу прокрутки, удалив white-space: nowrap (строка 174 и 215 в таблице стилей), но это еще больше разрывает ваш макет.

Answer 2

В вашем CSS у вас есть

@media screen and (max-width: 800px) 
    footer nav { 
     left: 50%; 
     top: 0; 
    } 
} 

слева: 50%; является виновным

Answer 3

Это причина:

footer { white-space: nowrap; }