Question

我想为可滚动的孩子使用固定的父div。

我的理论是使用div与position:fixed;和overflow:hidden;。 height将为100%。子div将可滚动。

.fixed {
    position:fixed;
    width:200px;
    height:100%;
    overflow:hidden;
    padding:50px;
    background:red;
    left:0;
    z-index: 1000000;
    top:0;
}

.inner {
    width:100%;
    height:100%;
    margin-bottom:50px;
}

.content {
    margin-bottom:50px;
}

HTML非常简单..

<div class="fixed">
    <div class="inner">
        <div class="content">Content 1</div>
        <div class="content">Content 2</div>
    </div>
</div>

我使用jquery鼠标滚轮进行滚动。工作示例位于：http://codepen.io/anon/pen/xGLWLO

问题在于我无法滚动到底部。我为固定的div添加50px padding，为子div添加了边距..但没有运气。问题出在哪里？

Answer 1

您可以将box-sizing: border-box;添加到.fixed

.fixed {
    position:fixed;
    width:200px;
    height:100%;
    overflow:hidden;
    padding:50px;
    background:red;
    left:0;
    z-index: 1000000;
    top:0;
    box-sizing: border-box;
}

.inner {
    width:100%;
    height:100%;
    margin-bottom:50px;
}

.content {
    margin-bottom:50px;
}

http://codepen.io/anon/pen/WvEzXP

请注意，如果这样做，也应该增加宽度。

有关box-sizing的更多信息。

填充底部不适用于固定div

1 个答案: