MobileAngularUI部分内的粘性页脚

Question

我有一个局部视图，我想要一个粘性页脚。不幸的是，无论我尝试什么，可滚动的div都会溢出我的页脚。

<div id="wrap">
    <div class="container">
        <div class="scrollable">
            <div class="scrollable-content">
                <div class="list-group">
                    <a ng-repeat="msg in chatmessages" href="#" class="list-group-item">
                        <div class="bubble bubble-{{msg.dir}}">{{msg.text}}</div>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <div class="container">
        <form class="row row-chat">
            <div class="input-group">
                <input type="text" class="form-control" ng-model="messageText" placeholder="Type your message" />
                <span class="input-group-btn">
                    <button type="submit" class="btn btn-primary">Send</button>
                </span>
            </div>
        </form>
    </div>
</div>

自定义CSS：

#wrap {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto -60px;
}

#footer {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
}

Answer 1

使用样式

修复具有特定高度的页脚

    #footer
{

top:1200px;
left:300px;
}