2

我正在尝试制作一个扩展为max-height使用 nanoScroller 和 ngrepeat 的 angularjs 的 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;
            }
        }
    }
}
4

2 回答 2

4

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

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

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

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

这是您调整后的 plnkr。

于 2015-03-26T08:38:19.280 回答
0

用这个替换你的样式

#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;
}
于 2015-03-26T08:27:52.830 回答