html - CSS 修复对浏览器窗口有异常影响

Question

我有一个侧边栏，其附加方式类似于 http://thenextweb.com/

这是该错误的现场演示:http://adamkochanowicz.com/static/build0502/kickstrap/_examples/contacts.html

要重现问题，只需向下滚动页面即可。

不知何故，我设法截取了问题的屏幕截图: https://s3.amazonaws.com/prod_object_assets/assets/4995413178034/grab_2013-04-12_a_3.00.59_PM.PNG?AWSAccessKeyId=AKIAJATICW4U3O4HFIEA&Expires=1367506772&Signature=DKQfG5DZSMHCzDO2BenbxpD2Zf0%3D

底部的灰色区域是您在页面上向下滚动太远时会看到的“无人区”。

我正在使用 jQuery Waypoints 来检测何时将 stuck 类应用到侧边栏。

应用 .stuck 后，它会为 #sidebar 提供以下 CSS:

section#sidebar.stuck {
  width: 300px;
  position: fixed;
  top: 0;
  bottom: 0;
  border-color: #DDD;
  width: 25%;
  -webkit-box-shadow: 2px 2px 5px #eeeeee;
  box-shadow: 2px 2px 5px #eeeeee;
}

jQuery 非常简单:

<script>$('section#sidebar').waypoint('sticky');</script>

由于某些原因，当水平视口(viewport)缩小时不会出现此错误。例如，当我在 Chrome 中打开底部停靠的元素检查器时。

Answer 1

在第 866 行的 contacts.html 中，类“.row”的 CSS 行如下所示:

.row {
  margin-left: -15px;
  margin-right: -15px;
}

您的错误一旦被删除或设置为:

.row {
  margin-left: 0px;
  margin-right: 0px;
}