Почему появляется горизонтальный скролл?
Два вопроса:
1) Почему когда я задаю overflow-y: auto появляется горизонтальный скролл, ведь это свойство предназначено для управления вертикальным?
2) Я хочу сделать обычное выпадающее подменю (второй вариант по ссылке ниже). Единственное условие — нужно ограничить максимальную высоту для основного меню, и отдельно для подменю. Это возможно сделать только на css?
https://jsfiddle.net/uj8o2y5f/1/
P.S. Внезапно обнаружил, что пару часов назад задали аналогичный вопрос Как добавить скролл подменю, в котором еще одно подменю?. Там более понятный пример меню.
ul ul
position: absolute;
уберите, это по первому варианту.
с ограничением высоты
max-height: 300px;
overflow-y: auto;
при достижении 300px появится скролл, вы все делали верно.
r_g_b_a, вы хотите, контейнер в котором два блока, и исходя из высоты любого блока появлялся скролл? Очень сложно понять что вы хотите))
FrelFrloich, типа того. Смотрите, сделал еще пример https://jsfiddle.net/v2zcnh8s/
Типичное выпадающее меню. Наводим на «Категории», снизу выпадает красное меню. Наводим на его первую ссылку — справа выпадает синее подменю.
Сделал их постоянно видимыми для удобства.
Единственное что требуется, ограничить высоту красного и синего блоков, потому что в них может быть большое количество ссылок, и эта простыня тянется на несколько экранов. Если я добавляю хотя бы красному блоку max-height: 100px; overflow-y: auto — дизайн ломается и появляется горизонтальный скрол.
r_g_b_a, понял, вас. https://jsfiddle.net/71yv592e/26/ попробуйте поэкспериментировать в этом направлении, обвернув сам ul root контейнером, я понимаю что не решение, но может вас наведет на мысль.
FrelFrloich, увы, но нужен отдельный скрол для каждого из меню, а не общий для контейнера. Но спасибо за участие.
Видимо придется выносить второе меню за пределы первого и позиционировать его с помощью js.
r_g_b_a, да вы правы, я даже перекурил и не могу понять возможно ли вообще вынести за границу второй список без отсутствия скорлла. Видимо нет. Спасибо вам, вы мне подарили занятия на часа 2). Если решу проблему отпишу.
r_g_b_a, всё же вот вариант без js до которого я додумался наведите на 1 итем https://jsfiddle.net/3noqhLz4/7/. Вам такой хоть и не нравится, но мне кажеться вполне актуальный если побаловаться с z-index для nav. У меня вопрос, а вы уверены что пользователь будет тыкать в li именно тот который по центру, а если в нижний тогда он не увидит меню вовсе.
Я немного подумал, попробуйте как вы и сказали через js только не на против итема выводить лист а на полную высоту родительского ul, в дочернем ul сначала заголовок пункта меню а потом уже пункты дочернего ul, мне кажется так вы избежите той ситуации которую я озвучил выше, при этом можно все это подкрашевать определённым цветом родительский li и дочерний ul. Надеюсь понятно описал ситуацию
Как исправить горизонтальный скролл на сайте
Верстальщики во время разработки сайта как правила сталкиваются с проблемой горизонтального скролла. В чем проблема? Откуда он появился? И как это исправить? Именно об этой и пойдет речь в этой записи.
Ниже я буду описывать способы нахождения элементов, которые создают горизонтальный скролл.
Первое решение
Предлагаю ваш сразу обратить внимание на этот способ.
После указания этого CSS, все элементы на странице будут обведены красным цветом — тем самым можно посмотреть где заканчиваются границы у всех блоков.
Иногда после этого сразу становится понятно какой блок вылазит за границы.
Второе решение
var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) < if (el.offsetWidth >docWidth) < console.log(el); >> ); Использовать JavaScript для поиска элементов.
Откройте консоль разработчика в вашем браузере. Нажмите F12 или Ctrl + Shift + i и перейдя во вкладку «Консоль» вставьте этот код и нажмите Enter. После этого у вас должно вывести ТОЛЬКО «undefined» или еще другие строки, например как на скриншоте ниже.
Третье решение
Вам нужно выделить весь контент (заваж мышкой и начать выделять весь текст сайта) и двигать его вправо, тем самым, вы можете найти блок который вылазит за границы. Чтобы визуально представить как это происходит — смотрите GIF’ку ниже.
Четвертое решение (ХАК)
Если из всего вышеперечисленного вам ничего не помогло, тогда предлагаю использовать следующий способ.
Это устанавливает 100% ширину для html и body, а так же убирает скролл по x-оси. Я не советую использовать этот способ, потому что он не решает проблему, а лишь маскирует ее.
Вывод
Вероятнее всего я выписал не все решения, но это основные, которые я использую. Как правило другие мне и не нужно были, так как эти отлично помогали.
А какие способы используете вы?
Почему появляется скролл горизонтальный раньше чем нужно?
Вроде ничего не вылазит.
На мобильных устройствах соответственно часть фона видно из-за этого и визуально как будто margion:0 auto; не так работает как надо — сайт не по центру как будто.
Оценить 6 комментариев
Потому что у вас у боди background: fon.jpg. У него рисунок такой, который создает иллюзию того, что всё плохо. И вообще, моветон уже веб-аппы лепить без box-sizing: border-box на всех элементах. И сдался вам этот скролл, какая разница, что на мобильных девайсах, если он всё равно не оптимизирован для них. Вы предлагаете юзеру бесконечно зумить? overflow-x: hidden и погнали
knitevision1: по теме — не в border-box дело https://yadi.sk/i/WHYRKGb4cxBJ4 клиенты просят чтобы не было непонятного куска фона при открытии на телефоне-планшете. а что не оптимизирован это вопрос другой уже.
То-есть фиксированная ширина страницы 970px и белый фон у этих 970px, а далее у вас отступы по 15px c каждой стороны благодаря padding: 0 15px 10px; То-есть ширина контейнера у вас 1000px — как только окно становится меньше чтобы все это уместить, появляется горизонтальный скролл..
Richard_Ferlow: Ну Вы пока меряйте, а я знаю. Пока box-sizing: content-box; (значение по умолчанию, если его не трогать) отступы за белым фоном. 🙂
Виктор Выскребенцев: сокращенная форма, при такой записи верх 0, левый-правый 15px, низ 10. То-есть, если не указан левый (четвертое значение) то берется левый равно правому
Alexander Sydorenko: понял, спасибо) всегда считал нагляднее или 4 параметра указывать, или уже раздельно margin/padding-left/right/top/bottom
Виктор Выскребенцев: Такое работает и для margin? ну и везде где есть верх, справа, низ, слева. Если просто то:
padding:Apx; // все отсупы A пх;
padding:Apx Bpx; // верх/низ A пх левый правый B пх;
padding:Apx Bpx Cpx; // верх A пх левый правый B пх, низ C пх;
padding:Apx Bpx Cpx Dpx; // верх A пх правый B пх, низ C пх, левый Dпх;
Alexander Sydorenko: ну, 2 параметра и 4 параметра (а так же left/right/top/bottom) работают определенно
Просто вот если 3, то как-то неочевидно и сложновато запомнить, мне кажется: «дублируется» автоматически верх\низ или право\лево
Виктор Выскребенцев: Ну правило такое, если нет какого то значения в очереди (последнего, левого) значит берем значение симметричного (второго, правого), если нет симметричного, тогда значение одинаково для всех.
На самом деле и для двух, точно по этому же правилу работает 🙂 (нет 4-го берем, второй, нет третьего берем первый, нет второго берем первый) Это чтобы понять почему оно так, и чтобы было очевидней.
Виктор Выскребенцев: запомнить просто — по часовой идут значения — сверху справа снизу слева. у многих значений так
Alexander Sydorenko: смотрите, то что вы сказали это понятно все, однако посмотрите в firebug допустим — если padding 0 у wrapper сделать https://yadi.sk/i/WHYRKGb4cxBJ4 — в общем wrapper полностью в экран помещается, но все равно скролл откуда-то
Richard_Ferlow: да, вы совершенно правы.. flex-prev и flex-next имеют .flex-direction-nav .flex-next right:-36px; и .flex-direction-nav .flex-prev left:-36px;, через эти правила и вылезают за контент. но я не вижу фактически этих ссылок — кнопка вперед и кнопка назад.. если не критично, то проще всего, по-моему, убрать этот косяк, добавив правило для .flexslider Ну либо поставив им left и right так чтобы не вылазили в минус.