Javascript ng重复垂直溢出

我目前有一个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>

任何帮助都将不胜感激。

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

• “gt list-group-item”div应该有另一个类，“row”（我相信您正在使用引导，因为您有col-xs-4等等
• 添加溢出：滚动到foodList div

---

如果它不起作用，请带着反馈回来。

问题是包含

ng repeat

列表的div，在本例中是带有

id=“foodsTab”的div

，没有显式设置它的

高度

。它只设置了

最大高度

。

ng repeat

列表需要这个

高度

值来确定它自己的高度。

你能添加css，或者更好的JSFIDLE吗？FoodListdiv在css中有一个定义的高度吗？如果没有，则溢出：滚动不会work@Nora我将包括我的main.css。它是一个很大的文件，但是如果你在该文件中搜索，仍然可以找到css类。但是我的应用程序现在太大，无法将其全部放在JSFIDLE中。@BinaryGhost是的，它有一个设置的高度和最大高度。滚动条确实会显示出来。但是它确实显示了当项目由ng-repeat生成时，esn根本不尊重高度或最大高度属性。谢谢你的回答。我正在使用

less

，和

gt list group item

扩展

row

。因此gt list group item是一行。我还尝试将

overflow:scroll

放在foodList div上，所做的就是添加一个v垂直和水平滚动条，但列表的高度保持不变，仍然忽略其容器上设置的css高度属性。以下是我进行上述更改后的外观。可能您的gt list group项目或gt draggable会覆盖.row的一些键属性。请尝试。（组项目div已复制了2次，以获取其中的某些内容）我做了你提到的更改，现在是这样的：看起来它与特定的css无关。foodTab的最大高度为95%。试着松开它。在你最新的屏幕截图中，我觉得你的foodList离开了屏幕，而不是我之前认为的项目。因此，它要么变小，以适合foodTab或食物选项卡必须更改。在我看来，食物列表的最大高度不起作用。我建议在食物列表上使用固定的最大高度（以像素为单位），然后删除食物选项卡上的最大高度

.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;
}