Padding-bottom not works for fixed div

Question

I would like to use a fixed parent div for a scrollable child.

My theory is to use a div with position:fixed; and overflow:hidden;. The height will be 100%. The child div will be scrollable.

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

The HTML is very simple..

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

I used jquery mousewheel for scrolling. The working example is available at: http://codepen.io/anon/pen/xGLWLO

The problem is that I can't scroll to the bottom. I added 50px padding for the fixed div, and margin for the child div.. but no luck. Where's the problem?

Answer 1

You could add box-sizing: border-box; to .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

Notice that you also should increase the width if you do so.

More information about box-sizing.