Отладка переполнения страницы CSS

Моя страница переполняется вправо (есть лишнее пустое пространство, вызывающее горизонтальную полосу прокрутки). Файл CSS представляет собой ссылку на CSS.

Практика, которой я следовал, - в начале установка отступов и полей 0 для всех используемых элементов html. Затем поля верхнего уровня имеют ширину + отступ + поле ‹ = 100%, насколько я могу судить. Что еще более важно, я провел отладку в Chrome Developer Tools и Firebug (в Firefox). Я просмотрел каждый блок контейнера в иерархии в теге body, и ширина каждого из них такая же, как ширина окна. Зачем тогда перелив?

Кстати, если div A содержит div B и C, то ширина A будет не менее max(width(B), width(C)), верно?


html css google-chrome-devtools firebug
person workwise    schedule 08.08.2014    source источник
comment
Поскольку у вас адаптивный сайт, вы можете добавить overflow:hidden к body... однако это не решит основную проблему.   -  person SW4    schedule 08.08.2014
comment
Вы можете быстро отладить этот тип проблемы, удалив элементы со страницы с помощью инспектора Chrome (щелкните элемент в инспекторе, нажмите клавишу удаления на клавиатуре).   -  person thirtydot    schedule 08.08.2014

Ответы (5)


arrow_upward
3
arrow_downward

Похоже, проблема в #mainhmenu со 100% шириной и 5% отступом с обеих сторон от

@media (min-width: 1200px)
  #navigation ul {
  padding: 0% 5%;
}

вклад в общую ширину 110%.

person Evan    schedule 08.08.2014
comment
Нужно либо отрегулировать ширину, отступы, добавить overflow-x скрыто к body, либо я бы рекомендовал двигаться вперед с box-sizing: border-box; paulirish.com/2012/box-sizing-border-box-ftw - person Evan; 08.08.2014
comment
Спасибо, Эван, за то, что он сузил круг. Я узнал кое-что хорошее из ваших и других ответов сегодня. - person workwise; 08.08.2014
comment
Рад, что это помогло ~ У каждого есть свой метод поиска ошибок. Удачи в продвижении вперед! - person Evan; 08.08.2014

arrow_upward
2
arrow_downward

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

Визуализатор HTML Box — GitHub

person Gabriel McAdams    schedule 24.10.2016

arrow_upward
1
arrow_downward

Удалите width: 100%; из #mainhmenu :)

person Rafff    schedule 08.08.2014
comment
Во-первых, спасибо! Теперь я спустился на этот уровень иерархии и действительно это является причиной переполнения. Меня интересует - как найти такие проблемы вообще? Разве родители mainhmenu не должны иметь ширину больше, чем mainhmenu? Или в основном в инструментах отладки это не так, и нужно проверять каждый элемент в отдельности? - person workwise; 08.08.2014
comment
Лично я удаляю узлы один за другим, и если что-то вызывает проблему, я пытаюсь изменить значения CSS. - person Rafff; 08.08.2014
comment
Да, это именно то, что я сделал. Открыл инспектор и начал работать снизу вверх - удаляя узлы до тех пор, пока проблема не будет сужена. - person Evan; 08.08.2014

arrow_upward
1
arrow_downward

Это ваше #mainmenu Его ширина установлена ​​на 100% и имеет 5% отступы по бокам. Если вы избавитесь от заполнения или установите его ширину на 90%, вы решите свою проблему.

person Rice Junkie    schedule 08.08.2014

arrow_upward
1
arrow_downward

Вы можете скрыть горизонтальную полосу прокрутки,

body{
    overflow-x:hidden;
}

надеюсь, это поможет. И, пожалуйста, поймите, что как только вы укажете ширину и добавите к ней отступы, это увеличит общую ширину элемента.

person Thomas Sebastian    schedule 08.08.2014