CSS: переполнение элемента Div, несмотря на отсутствие полей или отступов

Это продолжение моей предыдущей проблемы (расширение тела для покрытия нижнего колонтитула z-indexed, когда содержимого недостаточно), который теперь решается с использованием css3 height calc, а также предоставленного ответа), посредством чего #mainbody элемент #mainbody где он должно быть. Я установил нижний предел 365 пикселей:

.mainbody{
    [...]
    margin-bottom: 365px;
}

так как это высота нижнего колонтитула, который она покрывает, но по какой-то причине она продолжает прокручиваться выше, несмотря на то, что нет другого поля, дополнения или содержимого, толкающего его. - Модель вычислений с короткими номерами в инспекторе кода также подтверждает это для меня, Я также удалил край-нижнюю строку кода, и то же самое все еще происходит.

Вы можете посмотреть код и пример здесь: http://stackoverflow.adamrapley.com/

Благодаря :)

Дополнительный код, который выделяет область, которая не делает то, что она должна:

html,body,#mainbodyholder{
    height: 100%;
}

#mainbodyholder{
position: relative;
position:0;
}


#mainbody{
transition: all 50ms;
padding: 0 10%;
height: 100%;
}

.mainbody{
position: relative;
top:0;
min-height: -webkit-calc(100% - 220px);
min-height: -moz-calc(100% - 220px);
min-height: -o-calc(100% - 220px);
min-height: calc(100% - 220px);
background: #E2E2E2 url('../img/ticks.png');
padding-bottom: 20px;
margin-bottom: 365px;
box-shadow: 0px 0px 30px 0px #000000; 
padding-top: 220px;
z-index: 2;
}

и HTML:

<div id="mainbodyholder">
    <div class="mainbody container">
        <h1 class="title">Title</h1>
        <div id="mainbody">
            <p>Content</p>
        </div>  
    </div>
</div>