滚动条破解了固定位置侧边栏的布局

Question

我有一个带有width: 100%;的网站包装器，它会被推到右边，如果单击特定按钮，就会显示position: fixed;侧边栏。到目前为止，这工作得很好，我唯一的问题是，如果网站加载了滚动条，它会在固定位置的div之间产生裂缝。你们有人有建议吗？

#right_sidebar {
  width: 160px; 
  height: 100%; 
  background-color: #ffb005; 
  position: fixed; 
  right: -160px;
}

点击：

$('#button').click(function() { 
    $right_sidebar.animate({right: 0}, transDelay);
    $outer_wrapper.animate({marginLeft: -160}, transDelay);
});

编辑：点击此处，请按绿色背景。

Answer 1

我为u.修复了它

这是小提琴

添加这个就成功了：

body, html {
   height: 100%;
   margin: 0;
   outline: 0;
}

Answer 2

似乎100%的宽度是个问题-试试这个：

<div id="outer_wrapper">
    <div id="right_sidebar">dfsdf</div>
</div>
#outer_wrapper  {
/*  width: 100%; */ 
    min-height: 100%;
    background-color: green; 
}
#right_sidebar {
    position: fixed; 
    right: -160px;
    width: 160px;
    min-height: 100%;
    background-color: red;
}