javascript - 最大高度和 nanoscroller + AngularJS NgRepeat

Question

我正在尝试使用 nanoScroller 和 angularjs 的 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

问题是您的 nanoScroller 代码将您的内容放在绝对定位的 div 中。这意味着您的整个无序列表超出了内容流，并且不会填充/扩展父级的高度。

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

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

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

Here your adjusted plnkr .