在可调整大小的div中嵌入angular.js应用程序

Question

我正在使用angular.js在我的网站上分页数据（找到http://www.angularcode.com/angularjs-datagrid-paging-sorting-filter-using-php-and-mysql/处的代码）。用户可以决定他想在单个页面上显示多少行数据。因此，表格不断调整大小。是否有可能将应用程序嵌入到动态调整大小的div中，以便在网站底部正确附加一个footer-div？

以下是该应用的代码：

<div id="app-container" ng-app="myApp" ng-app lang="en">
    <div ng-controller="customersCrtl">
        <div class="col-md-10 col-md-offset-1">
            <div class="row">
                <div class="col-md-2">PageSize:
                    <select ng-model="entryLimit" class="form-control">
                        <option>25</option>
                        <option>50</option>
                        <option>100</option>
                        <option>500</option>
                    </select>
                </div>
                <div class="col-md-3 col-md-offset-7">Filter:
                    <input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
                </div>
                <div id="url-amount" class="col-md-3 col-md-offset-9">
                    <h5>Filtered {{ filtered.length }} of {{ totalItems}} total URLs</h5>
                </div>
            </div>
            <br/>
            <div class="row">
                <div class="col-md-12" ng-show="filteredItems > 0">
                    <table class="table table-striped table-bordered">
                    <thead>
                    <th>URL&nbsp;<a ng-click="sort_by('url');"><i class="glyphicon glyphicon-sort"></i></a></th>
                    <th>Status Code&nbsp;<a ng-click="sort_by('statuscode');"><i class="glyphicon glyphicon-sort"></i></a></th>
                    <th>Category&nbsp;<a ng-click="sort_by('statuscategory');"><i class="glyphicon glyphicon-sort"></i></a></th>
                    </thead>
                    <tbody>
                        <tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
                            <td>{{data.url}}</td>
                            <td>{{data.statuscode}}</td>
                            <td>{{data.statuscategory}}</td>
                        </tr>
                    </tbody>
                    </table>
                </div>
                <div class="col-md-12" ng-show="filteredItems == 0">
                    <div class="col-md-12">
                        <h4>No URLs found</h4>
                    </div>
                </div>
                <div class="col-md-12" ng-show="filteredItems > 0">    
                    <div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="&laquo;" next-text="&raquo;"></div>            
                </div>
            </div>
        </div>
    </div>
</div>

<div id="footer"></div>

和样式：

#footer {
    width: 100%;
    height: 200px;
    background-color: black;
}

页脚div与angular.js应用程序重叠，而不是附加在下面。