Question

我有一个带有width: 100%;的sitewrapper，如果单击一个特定按钮，它会被推到右侧并带来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);
});

修改： FIDDLE HERE，请按绿色背景。

Answer 1

我为你修好了。

以下是fiddle

添加这个就可以了：

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;
}

滚动条裂缝固定位置侧边栏的布局

2 个答案: