最大高度和 nanoscroller + AngularJS NgRepeat

Question

我正在尝试使用 angularjs 的 nanoScroller 和 ngrepeat 制作扩展为 max-height 的 div，但我无法让它工作，这是 plunkr : Plunkr.

如果您将 _Array 长度更改为 5，您就会明白我在说什么。 div 的高度未根据内容进行调整...当它应该缩小以适合时它停留在 max-height。

这里是HTML代码：

<div id="console" ng-app="myApp">
  <header>Title Here</header>
  <section>
    <ul ng-init="(_Array = []).length = 15;" class="nano">
      <div class="nano-content">
        <li ng-repeat="i in _Array track by $index" post-render="">{{ $index }}</li>
      </div>
    </ul>
  </section>
</div>

和使用 nanoScroller 的指令：

angular.module('myApp', [])
    .directive('postRender', postRender);

postRender.$inject = ['$timeout'];

function postRender($timeout) {
    return {
        link: function ($scope, iElm, iAttrs, controller) {
            $timeout(function () {
                jQuery('.nano').nanoScroller({
                    preventPageScrolling: true
                })
            }, 100);
        }
    }
}

和我的 SCSS：

* {
    box-sizing: border-box;
}
body, html {
    height: 100%;
}
#console {
    margin: 0 auto;
    max-height: 500px;
    height: 100%;
    width: 330px;
    opacity: 0.9;
    color: #FFF;

    header {
        padding: 15px;
        background: none repeat scroll 0 0 rgba(21, 21, 21, 0.8);
    }

    section {
        overflow: auto;
        background-color: #333;
        height: 100%;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            & div {
                padding: 15px 15px;
            }
            li {
                margin-bottom: 5px;
                width: 100%;
                background-color: red;
                padding: 15px;
            }
        }
    }
}

Answer 1

用这个替换你的样式

#console {
  margin: 0 auto;
  height: 500px; 
  width: 330px;
  opacity: 0.9;
  color: #FFF;
}
#console section ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 500px;
}

Answer 2

问题在于您的 nanoScroller 代码将您的内容放置在绝对定位 div 中。这意味着您的整个无序列表超出了内容流，并且不会 fill/expand 父项的高度。

您可以通过从可滚动容器中删除 position: absolute; 并将 max-height 声明移至其中来修复它。例如：

.nano>.nano-content {
  position: relative;
  max-height: 500px;
}

然后您还必须从父容器中删除 height: 100%;。

Here your adjusted plnkr.

最大高度和 nanoscroller + AngularJS NgRepeat

Max-height and nanoscroller + AngularJS NgRepeat

html

javascript

css

angularjs

nanoscroller