是什么让我的页面略微延伸到视口之外？ [CSS]

Question

基本上我有点困惑。您将在http://furnace.howcode.com处看到，在第二列中，底部滚动条按钮稍微延伸到视口末端之外。我很困惑，因为我一直在检查CSS，但找不到任何导致这种情况的东西。

你能看一下吗？这可能是我错过的简单事情！ ：）

截图：

hmmm...? http://files.droplr.com/files/49111734/XWqC.hurrr.png

Answer 1

这是因为您在#tabscontainer上使用了固定像素高度，但在#ajaxresults上使用了一个百分比。调整窗口大小将显示（或剪切）更多滚动条，因为90px并不总是视口的10％。

解决此问题的最简单方法是将#tabscontainer设置为height:10%。

编辑：刚刚注意到您对标签高度固定的评论。寻找替代方案。

好的，虽然我没有在IE中测试过这个问题，但是你可能想看看这个;）

1. 给#col2 position:relative
2. 从height:90%移除min-height:90%，max-height:90%和#ajaxresults。
3. 提供#ajaxresults：position:absolute，top:90px和bottom:0。

尝试一下，它应该按预期工作，但就像我说我没有检查IE，所以你可能需要做一些更多的黑客才能让它在那里工作。

Answer 2

#tabscontainer元素的高度。

#tabscontainer {
 background-color:black;
 height:90px;
 max-width:529px;
 min-width:326px;
 overflow-x:hidden !important;
 width:100%;
}

尝试：

#tabscontainer {
 height:30px;
 ...
}

评论的后续行动：

然后降低#ajaxresults高度：

#ajaxresults  {
   height:70%;
   max-height:70%
   ...
}