填充底部不适用于固定 div

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

Padding-bottom not works for fixed div

html

jquery

scroll

css-position

mousewheel