Question

我目前正在开设一个网站，其网址为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定位的快速课程：Learn CSS Positioning in Ten Steps

Answer 2

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

html { overflow:hidden;}

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

Answer 3

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

神秘的垂直滚动条出现

3 个答案: