与角料动态高度压片滚动的内容元素 [英] Scrollable content elements with Angular Material dynamic-height tabs

问题描述

此问题已经拿出<一个href=\"http://stackoverflow.com/questions/29229300/angular-material-design-md-tab-scroll-content\">several ŧ输入法的的角材料，但我没能做出任何V1.0.5的建议工作。整个页面（或Flex容器）滚动，移动卡拿出来看。

This question has come up several times during the evolution of Angular Material, but I'm not able to make any of the suggestions work for v1.0.5. The entire page (or flex container) scrolls, moving the tabs out of view.

我如何能实现滚动，全高含量的元素呢？

How can I achieve scrollable, full-height content elements?

<div flex>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="one">
            <md-content class="md-padding">

演示小提琴

奖金为噶结合自定义滚动的。

推荐答案

我的工作了。通过删除动态高度指令，然后使用绝对定位，它的工作：

I've worked it out. By removing the dynamic-height directive, then using absolute positioning, it's working:

.tabs-wrapper {
    position: relative;
}
.full-size {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div ng-app="sandbox">
    <div flex class="tabs-wrapper">
        <md-tabs class="full-size" md-border-bottom>

小提琴演示

绝对定位需要获得柔性元素的子扩大。

注：高度在小提琴演示不正确。不会发生在我的项目这一问题。

Note: The height is incorrect in the fiddle demo. This problem doesn't occur in my project.

这篇关于与角料动态高度压片滚动的内容元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！