Question

我目前有一个Angular应用程序，我的ng-repeat列表垂直溢出其容器。这是问题的图片：

正如您所见，列表底部的容器溢出。我希望列表包含在其容器中，并在有溢出时显示垂直滚动条。

我尝试在包含列表的div上使用overflow:scroll和overflow:auto css，但似乎没有任何效果。滚动条确实显示在列表周围，但它不会将列表限制为其容器的高度。这是我的代码，使列表位于底部的代码：

<div style="height: 90%">
    <h2>Foods and Meals</h2>
    <span class="glyphicon bg-fade"></span>
    <div class="jumbotron" id="foodJumbotron" style="height: 100%">
        <div class="container" style="height: 100%">
            <div class="row" style="height:100%">
                <div class="col-xs-6" style="height:100%">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="active"><a data-target="#foodsTab" role="tab" data-toggle="tab">Foods</a></li>
                        <li><a data-target="#myFoodsTab" role="tab" data-toggle="tab">My
                            Foods</a></li>
                        <li><a data-target="#myMealsTab" role="tab" data-toggle="tab">My
                            Meals</a></li>
                    </ul>
                    <div class="tab-content" style="height:100%">
                        <!------------->
                        <!--FOODS TAB-->
                        <!------------->
                        <div id="foodsTab" class="tab-pane fade active in" style="max-height:95%" ng-controller="FoodsCtrl">
                            <form role="from" class="form-inline row list-group-item">
                                <div style="width:100%">
                                    <span class="glyphicon glyphicon-search" style="margin-left: 0"></span>

                                    <input type="text" class="form-control " style="width:60%; margin-left: 2%"
                                           id="searchFoods"
                                           ng-model="search"
                                           placeholder="Search food database..."/>

                                    <div class="btn-group">
                                        <button type="submit" ladda="submitting" data-style="slide-right"
                                                id="foodsTabSearch"
                                                class="btn btn-primary btn-outline btn-sm btn-rounded">Search
                                        </button>
                                        <a class="btn btn-primary btn-outline btn-sm btn-rounded"
                                           ng-click="filter.changeState()">Filter</a>
                                    </div>
                                </div>
                            </form>
                            <div ng-show="filter.state" class="row" style="margin-top:4%;">
                                <div class="form-group ">
                                    <input type="text" class="form-control" id="filterFoods"
                                           ng-model="filter.value"
                                           placeholder="Filter results..."/>
                                </div>
                            </div>
                            <div class="list-group-item row gt-header-colors">
                                <div class="col-xs-4" ng-click="sort.doSort('name')" style="text-align: left">
                                    Name
                                    <span ng-show="sort.state.name == 'name'"
                                          class="glyphicon glyphicon-resize-small glyphicon-sort-by-alphabet"></span>
                                    <span ng-show="sort.state.name == '-name'"
                                          class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
                                </div>
                                <div class="col-xs-2" ng-click="sort.doSort('cal')">Cal
                                    <span ng-show="sort.state.cal == 'cal'"
                                          class="glyphicon glyphicon-sort-by-attributes"></span>
                                    <span ng-show="sort.state.cal == '-cal'"
                                          class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                </div>
                                <div class="col-xs-2" ng-click="sort.doSort('pro')">Pro
                                    <span ng-show="sort.state.pro == 'pro'"
                                          class="glyphicon glyphicon-sort-by-attributes"></span>
                                    <span ng-show="sort.state.pro == '-pro'"
                                          class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                </div>

                                <div class="col-xs-2" ng-click="sort.doSort('carb')">Carb
                                    <span ng-show="sort.state.carb == 'carb'"
                                          class="glyphicon glyphicon-sort-by-attributes"></span>
                                    <span ng-show="sort.state.carb == '-carb'"
                                          class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                </div>
                                <div class="col-xs-2" ng-click="sort.doSort('fat')">Fat
                                    <span ng-show="sort.state.fat == 'fat'"
                                          class="glyphicon glyphicon-sort-by-attributes"></span>
                                    <span ng-show="sort.state.fat == '-fat'"
                                          class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                                </div>
                            </div>
                            <!-------------------------------------->
                            <!--HERE'S THE LIST THAT'S OVERFLOWING-->
                            <!-------------------------------------->
                            <div class="" id="foodsList" ng-style="{'max-height':'60%'}">
                                <div class="gt-list-group-item gt-draggable"
                                     ng-repeat="food in filteredFoods = (FoodsService.foods | regexFilterNoCase:(filter.value == '' ?
                                        '' : '\\b'+filter.value) | orderBy: sort.state.current) track by $index"
                                     ng-style="{'background-color': food == FoodsService.selectedFood ? 'lightblue' : ''}"
                                     ng-mousedown="FoodsService.selectedFood = food">
                                    <div class="col-xs-4" style="text-align: left">{{food.name}}</div>
                                    <div class="col-xs-2">{{food.cal}}</div>
                                    <div class="col-xs-2">{{food.pro}}</div>
                                    <div class="col-xs-2">{{food.carb}}</div>
                                    <div class="col-xs-2">{{food.fat}}</div>
                                </div>
                                <div class="gt-list-group-item" ng-show="filteredFoods.length == 0"
                                     ng-style="{'text-align':'center'}">
                                    <div class="col-xs-12">No foods here!</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

修改

这是我的自定义css类。它们实际上是一个较少的文件，但我使用的唯一较少的属性是扩展。其他一切都是基本的CSS。

.gt-appfront-error:extend(.help-block all) {
  color: #ffff00;
  text-align: left;
  font-size: large
}

.gt-list-item {
  font-size: 150%;
}

.gt-header-colors {
  background-color: #3ca2e0;
  color: #FFF
}

/*Verticly align div*/
.gt-outer {
  display: table;
  //position: absolute;
  height: 100%;
  width: 100%;
}

.gt-middle {
  display: table-cell;
  vertical-align: middle;
}

.gt-inner {
  margin-left: auto;
  margin-right: auto;
}

.gt-list-group-item {
  &:extend(.row all);
  &:extend(.list-group-item all);
  border-color: darkgray;
}

.gt-list-group-item:hover {
  background-color: #d2e9f4;
}

.gt-draggable {
  cursor: pointer;
}

.gt-droppable {
  border-width: 5%;
  border-style: dashed;
  border-color: #ccc;
}

.gt-active-droppable {
  border-color: #3ca2e0;
}

/* Tab Navigation */
.nav-tabs {
  margin: 0;
  padding: 0;
  border: 0;
}

.nav-tabs > li > a {
  background: #DADADA;
  border-radius: 0;
  cursor: pointer;
  color: #555555;
  margin-bottom: 0px;
  box-shadow: inset 0 -8px 7px -9px rgba(0, 0, 0, .4);
}

.nav-tabs > li > a:hover {
  background-color: lightblue !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
  background: white !important;
  border-radius: 5%;
  border-width: 2px;
  box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .4);
}

/* Tab Content */
.tab-pane {
  background: white;
  box-shadow: 0 0 4px rgba(0, 0, 0, .4);
  border-radius: 0% 2% 2% 2%;
  text-align: center;
  padding: 5% 6% 1% 6%;
  margin-top: 0px;
  margin-left: 2px;
}

//.animate-show.ng-hide-add {
//  animation: fadeOut 0.5s ease !important;
//}

.animate-show.ng-hide-remove {
  animation: fadeIn 0.3s ease !important;
}

非常感谢任何帮助。

Answer 1

格雷厄姆。只要我们没有你的工作项目，我们就可以给你一个答案，但我认为你应该做的改变如下：

“ gt-list-group-item ”div应该有另一个类“row”（我相信你使用的是Bootstrap，因为你有col-xs-4等等。
添加溢出：滚动到foodList div。

如果不起作用，请回复反馈。

Answer 2

问题是包含ng-repeat列表的div（在本例中为带id="foodsTab"的div）没有明确设置height。它只有max-height集。 ng-repeat列表需要此height值来确定自己的高度。

ng-repeat垂直溢出

2 个答案: