Css div不会在另一个div下滚动

如果访问者向上滚动，我需要让TextBoxesGroup在顶部图像下方滚动；如果访问者向下滚动，则需要让TextBoxesGroup在页脚的Add to框下方滚动。 我的页脚addtowrap几乎是固定的，但问题是div不会滚动，除非它在页脚下运行良好，然后当我滚动addtowrap div时，它也会滚动。 我做错了什么

<style>
    .wrong_email{
        display:none;
        color:red;
    }

    .add-to-wrap {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
        margin: 0 auto;
        text-align: center;
        background-color: rgba(0,0,0,0.6);
        padding: 10px 0 10px 0;
        z-index: 3;
    }
</style>


<div class="container">
    <div class="row">
        <div class="col-md-4" style="padding-left:0px; padding-right:0px;">
            <img src="/brand/nvite.png" class="img-responsive"/>
        </div>
        <div>
            <form method="POST"  id="login_form">
                <div id='TextBoxesGroup' class="textboxes-area">
                    <div id="TextBoxDiv1">
                        <input type='text'  id='textbox1' name='textbox_1' class="form-control" placeholder="Enter email address here"/>
                    </div>
                    <div class="wrong_email" id="err_1">Wrong email address</div>

                    <div class="divider"><img src="/mobileimages/brand_takeovers/divider_invite.png" class="img-responsive"/></div>
                    <div id="TextBoxDiv2">
                        <input type='text'  id='textbox2' name='textbox_2' class="form-control" placeholder="Enter email address here"/>
                    </div>
                    <div class="wrong_email" id="err_2">Wrong email address</div>

                    <div class="divider"><img src="/mobileimages/brand_takeovers/divider_invite.png" class="img-responsive"/></div>
                    <div id="TextBoxDiv3">
                        <input type='text'  id='textbox3' name='textbox_3' class="form-control" placeholder="Enter email address here"/>
                    </div>
                    <div class="wrong_email" id="err_3" >Wrong email address</div>
                </div>

                <span id='addButton' class="send-invite-more-boxes "/><img src="invitemore.png" class="img-responsive"/></span>                
        </div>
    </div>
</div> <!-- /container -->
<div class="add-to-wrap">
    <button type="submit" class="send-invite-button">Add To Basket</button>
</div>
</form>

---

好的，现在我有了卷轴，但是页脚没有粘到底部。当我向上滚动时，页脚开始滚动。我做错了什么？HTML中的结构错误比表单中的s多得多，所以这可能会混淆浏览器。