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

我正在使用angular.js对我的网站上的数据列表进行分页（代码位于）。用户可以决定在一个页面上显示多少行数据。因此，表格不断调整大小。是否有可能将应用程序嵌入到动态调整大小的div中，以便在网站底部正确追加页脚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>

---

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

问题中不清楚它现在是如何工作的（页脚有什么问题）您希望实现什么。@OlgaAkhmetova当我试图在页面底部添加a时，它不会显示在底部，而是与angular.js应用程序生成的表格重叠。因此，我想将angular应用程序嵌入到一个div中。问题是表格不断调整大小，因此我无法为div提供静态值。我的问题是，是否有可能将angular应用程序嵌入到一个div中，该div根据angular.js代码创建的表的大小调整大小。对不起，我仍然不理解您的意思<除非另有说明，否则代码>div默认可调整大小stated@OlgaAkhmetova我在问题中添加了一些信息。我认为问题出在

应用程序容器

元素的样式上，比如

float:left

之类，因为如果我只是将您的html代码复制到codepen，一切看起来都很好。

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