Question

有一个复杂的行/列布局，一切都很好，直到一个问题。

在中间我有一个白色区域，边缘有阴影，看起来像文字或类似的文字编辑器。

此文档区域的样式为DIN A 4，应在其父级中滚动..但我无法解决此问题...

以下是示例：

<md-content layout="row" flex id="WorkBench">   
    <md-content layout="column" flex>
        <md-tabs flex md-dynamic-height md-border-bottom>

            <md-tab layout="row" label="New Page" flex>

                <md-content layout="column" flex style="padding-top: 20px; overflow-y: scroll">
                    <md-content layout="row">

                        <md-content id="myDocument" layout="column" style="margin-left: auto; margin-right: auto; height: 297mm; width: 210mm; border: 1px solid #999; box-shadow: 5px 5px #999;">

                            <md-content layout="row" style="padding-top: 30mm;">
                                <md-content layout="column"><div style="width: 20mm"></div></md-content>
                                <md-content layout="column"><div style="width: 70mm; font-size: 9px; border-bottom: 1px solid #999;">simle reference text</div></md-content>
                                <md-content layout="column"></md-content>
                            </md-content>
                            <md-content layout="row">
                                <md-content layout="column" style="margin-left: 25mm;">
                                    <md-content style="width: 60mm; padding: 2mm; font-size: 12px;">
                                        <md-content layout="row" style="padding: 0.5mm">1. Line</md-content>
                                        <md-content layout="row" style="padding: 0.5mm">2. Line</md-content>
                                        <md-content layout="row" style="padding: 0.5mm">3. Line</md-content>
                                        <md-content layout="row" style="padding: 1mm">4.Line</md-content>
                                    </md-content>
                                </md-content>

                                <div layout="column">????</div>
                            </md-content>
                            <div layout="row"></div>
                            <div layout="row"></div>
                            <div layout="row"></div>
                        </md-content>
                    </md-content>
                </md-content>


            </md-tab>


            <md-tab layout="row" label="other page">
                <md-content layout="column" flex class="md-padding">
                    leer
                </md-content>
            </md-tab>

        </md-tabs>
    </md-content>
</md-content>

任何暗示我如何解决我的问题？

id =“myDocument”是应该在其父级中滚动的部分...

关于n00n

Answer 1

好的，这就是你想要的行为吗？ fiddle updated 我从标签中删除了dynamic heights，并删除了该md内容上的overflow-y: scroll。让我知道！周末愉快

Angular Material LAYOUT不会滚动我的内容

1 个答案: