AngularJS滚动问题(AngularJS Scrolling Issue)

我有一个加载多个视图的Container

<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>

问题是，如果“MathContent”中的内容太多，则NG-View Div变为可滚动而不是“MathContent”Md-Content，因为[Header Row]应该具有固定位置，所以不需要。

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

I have a Container that loads multiple views

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

For Example one of those views loaded looks like this

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

The Problem is, that if there is too much Content in "MathContent", the NG-View Div becomes Scrollable and not the "MathContent" Md-Content whats not wanted because the [Header Row] should have a fixed position.

Is it somehow possible to prohibit an Element (for example the ng-view) from beeing scrollable or can I lock the Maximum Size of selection-whiteframe to the height of the ng-view?

最满意答案

这有点棘手，要让它在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中不起作用。 为了使它在任何地方都能工作，你还需要用md-content替换所有div 。

<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

This is a bit tricky, to make it work in Chrome you just need to add layout="column/row" on every level.

<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>

But this will not work in Firefox. To make it work everywhere, you need to also replace all the div's with 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>

Here is a simple codepen and I refer you to my answer here: https://stackoverflow.com/a/29516060/2553215

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

AngularJS滚动问题(AngularJS Scrolling Issue)

我有一个加载多个视图的Container

<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>

问题是，如果“MathContent”中的内容太多，则NG-View Div变为可滚动而不是“MathContent”Md-Content，因为[Header Row]应该具有固定位置，所以不需要。

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

I have a Container that loads multiple views

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

For Example one of those views loaded looks like this

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

The Problem is, that if there is too much Content in "MathContent", the NG-View Div becomes Scrollable and not the "MathContent" Md-Content whats not wanted because the [Header Row] should have a fixed position.

Is it somehow possible to prohibit an Element (for example the ng-view) from beeing scrollable or can I lock the Maximum Size of selection-whiteframe to the height of the ng-view?

最满意答案

这有点棘手，要让它在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中不起作用。 为了使它在任何地方都能工作，你还需要用md-content替换所有div 。

<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

This is a bit tricky, to make it work in Chrome you just need to add layout="column/row" on every level.

<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>

But this will not work in Firefox. To make it work everywhere, you need to also replace all the div's with 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>

Here is a simple codepen and I refer you to my answer here: https://stackoverflow.com/a/29516060/2553215

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