css - 是什么让我的页面略微超出视口？[CSS]

Question

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

你能看看吗？这可能是我刚刚错过的简单事情！:)

截屏：

_{（来源：droplr.com）}

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:90pxbottom: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%
   ...
}