神秘垂直滚动条出现

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;，您将看到第三级子菜单如何位于浏览器窗口下方，从而导致滚动条出现。当你改变top和left时，它是相对改变的。

这也是为什么正如 maxisam 建议的那样，放置 position:absolute; 修复它。

当然解决方法有很多种，但现在你知道原因了。

我建议您在这个页面上学习一些有关 CSS 定位的快速课程：通过十个步骤学习 CSS 定位

Answer 2

页面上的某个元素（单击时显示的）溢出。添加此 CSS 规则，滚动条将不再出现：

html { overflow:hidden;}

解决该问题的另一种方法是找到有问题的元素并确保它们不会溢出父容器的边界。

Answer 3

我认为您应该使用 position:absolute; 作为单击后弹出的子菜单。