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

Answer 2

用这个

替换你的风格

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

最大高度和纳米尺度+ AngularJS NgRepeat

2 个答案: