Таинственная вертикальная полоса прокрутки появляется

Question

В настоящее время я работаю над веб-сайтом, URL которого составляет http://lathamcity.com/

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

Эффект виден, если нажать «В разработке» или любой параметр ввторое доступное меню (все опции вызывают один и тот же div).

Код jQuery для выбора пункта в первом меню выглядит следующим образом:

var headerHeight = $('#headerTable').height();
$('#selectStart').offset({left: 0, top: headerHeight});
var select1Width = $('#selectStart').width();
var select2Width = select1Width + $('.selector2').width();
$('table.selector2').offset({left: select1Width, top: headerHeight});
$('table.selector2').hide();
$('td.selector1').click(function() {
    $('td.selector2').css({'background-color': '#3B3133'});
    $('table.selector2').hide();
    $('div.pane').hide();
    var choice = '#' + $(this).attr('data-choice');
    $(choice).show();
    $(choice).offset({left: select1Width, top: headerHeight});
    $('td.selector1').css({'background-color': '#3B3133'});
    $(this).css({'background-color': '#61434A'});
});

Любые идеи

Answer 1

Это потому, что вы не понимаете, как работает position.

Чтобы объяснить, что произошло, попробуйте удалить position: relative;, и вы увидите, как подменю 3-го уровня будет находиться ниже окна браузера, в результате чего появится полоса прокрутки. Когда вы изменили top и left, он изменяется относительно.

Именно поэтому, как и предлагал maxisam, исправление position: absolute; исправляет это.

Конечно, есть много способов ее решить, но теперь вы знаете причину.

Я предлагаю эту страницу для некоторых быстрых уроков по позиционированию CSS: Изучение позиционирования CSS за десять шагов

Answer 2

Я думаю, вы должны использовать position: absolute; для подменю, которое появится после щелчка.

Answer 3

Один из элементов на странице (который вы показываете при нажатии) переполнен. Добавьте это правило CSS, и полосы прокрутки больше не будут появляться:

html { overflow:hidden;}

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