神秘垂直滚动条出现

我目前工作的一个网站上，其网址为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'}); 
});

任何想法？

来源

2011-12-27 Andrew Latham

你确定这只是一个垂直滚动？我在FF中得到一个水平的。 – 2011-12-27 02:04:47

与萤火虫搞砸了，如果我摆脱'table id =“selectProjects”的左边和顶部样式''它有帮助。不知道答案是什么...我只是使用'div's – 2011-12-27 02:09:20

我建议你使用Div而不是表格。 – maxisam 2011-12-27 02:25:28

这是因为你不明白position是如何工作的。

要解释发生了什么，请尝试删除position: relative;，您将看到第三级子菜单将如何在浏览器窗口下方，从而导致滚动条出现。当您更改top和left时，它会相对更改。

这也是为什么如maxisam建议，把position: absolute;修复它。

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

我建议这个页面上的CSS定位一些快速的教训：Learn CSS Positioning in Ten Steps

来源

2011-12-27 02:43:21 syaz

非常感谢！我认为我现在明白了很多，问题已经解决。 – 2011-12-27 03:00:47

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

html { overflow:hidden;}

另一种方式来解决这个问题是要找到有问题的元件，并确保它们不会溢出父容器的边界。

来源

2011-12-27 02:07:20

解决了这个问题;然而，它并没有解决这个谜，而且我希望人们能够滚动，例如，如果他们没有使用全屏，并且需要滚动才能看到正常的设置。 – 2011-12-27 02:18:21

这是治疗症状，而不是原因... – syaz 2011-12-27 02:56:18

我认为你应该标记SyaZ的后回答，而不是这一个（因为他花时间解释它，但我没有）。我认为设置'overflow：hidden;'为html是一个糟糕的CSS设计。就像你说的，如果你需要在某处使用滚动条？ – maxisam 2011-12-27 02:57:02

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

来源

2011-12-27 02:28:04 maxisam

神秘垂直滚动条出现

回答

相关问题