Question

我有一个加载多个视图的容器

<md-content flex id="content">
     <div ng-view></div>
</md-content>

例如，加载的其中一个视图看起来像这样

<div layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
    [Header Row Here]
    <md-content id="MathContent">
        [SomeContent]
    </md-content>
</div>

问题是，如果＆＃34; MathContent＆＃34;中的内容太多，则NG-View Div变为可滚动而不是＆＃34; MathContent＆＃34; Md-Content什么不想要，因为[Header Row]应该有一个固定的位置。

是否有可能禁止元素（例如ng-view）可以滚动或者我可以将选择白框的最大尺寸锁定到ng-view的高度？

Answer 1

这有点棘手，要让它在Chrome中运行，您只需在每个级别添加layout="column/row"。

<body layout="column">
    <md-content layout="column" flex id="content">
        <div layout="column" ng-view>
            <div layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
                [Header Row Here]
                <md-content layout="column"  id="MathContent">
                   [SomeContent]
                </md-content>
            </div>
        </div>
    </md-content>

但这在Firefox中不起作用。要使其在任何地方都有效，您还需要将所有div替换为md-content。

<body layout="column">
    <md-content layout="column" flex id="content">
        <md-content layout="column" ng-view>
            <md-content layout="column" id="selection-whiteframe" ng-controller="MathCtrl">
                [Header Row Here]
                <md-content layout="column"  id="MathContent">
                   [SomeContent]
                </md-content>
            </md-content>
        </md-content>
    </md-content>

这是一个简单的codepen，我在这里引用你的答案：https://stackoverflow.com/a/29516060/2553215

http://codepen.io/kuhnroyal/pen/GZoRwz

AngularJS滚动问题

1 个答案: