固定 Div 隐藏滚动条

Question

我有一个奇怪的问题，我有一个在我的页面内滚动的 DIV...但是在该 div 中我有固定的“标题”...并且因为我的布局是流动的（100%）宽，所以它使得“FXED”div 覆盖下面 div 的滚动条......

解决此问题的最佳方法是什么？我附上了一张简单的屏幕截图，说明了正在发生的事情...希望它有所帮助。

/* BLUE SECTION */    
.floatingHeaderBox {
        width: 100%;
    }

    /* RED BOX BELOW */
    .contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}

.contentBoxRight{ overflow:auto; overflow-x:hidden; }

Answer 1

我认为你可以这样做 http://jsfiddle.net/yuliantoadi/bXukG/1/

我没有你的html，所以我自己做了。

Answer 2

如果您的 floatHeaderBox 位于滚动框中，如下所示：

<div class="contentBoxRight">
    <div class="floatingHeaderBox">Hdr</div>
</div>

您只需添加一个负左边距来考虑滚动条。由于 x-overflow 设置为隐藏，因此您将无法知道它已移动。添加填充或子容器，以在左侧重新获得所需的空间。

.floatingHeaderBox {
        width: 100%;
        margin-left:-18px;
    }