css - 如何在纸标签中的 polymer 核心列表上设置 100% 高度

Question

我试图在 core-list 上设置 100% 高度元素放置在 <paper-tabs>在 polymer 中。不幸的是，当我试图通过此链接的评论解决我的问题时 StackOverflow Height on Core-list我的核心列表高度为 80px，我无法将高度设置为更大的值。

我的代码如下:

<polymer-element name="progress-page" attributes="hash">
    <template>
        <link rel="stylesheet" href="../assets/css/styles.css">
        <link rel="stylesheet" href="../assets/css/menu-card.css">
    <sidebar-layout selected="main-page">
        <div class="title">Report</div>
        <div class="page-holder" horizontal layout center center-justified>
            <div class="page-sub-title">Progress</div>
        </div>


        <paper-tabs selected="{{selected}}">
            <paper-tab>Tab 1</paper-tab>
            <paper-tab>Tab 2</paper-tab>
        </paper-tabs>

        <core-pages  selected="{{selected}}">
            <div>
                <div class="content" fit style="overflow:auto;">
                    <core-list data="{{data}}" fit height="120" style=" height: 100%;">
                        <template>
                            <div class="row" layout horizontal center>
                                <div data-index="{{index}}">{{model.name}}</div>
                            </div>
                        </template>
                    </core-list>
                </div>
             </div>

                <div>
                    Page 2 qasdasd
                </div>
        </core-pages>


    </sidebar-layout>


</template>

<script>
    Polymer('progress-page', {
        ready: function () {
            this.selected = 0;
            this.data = generateContacts();

            function generateContacts() {
                var data = [];
                for (var i = 0; i < 1000; i++) {
                    data.push({
                        name: 'dddd',
                        string: 'asd'
                    });
                }
                return data;
            };
        }
    });
</script>

我尝试了第二种解决方案，但仍然无效，代码如下。我必须以像素为单位制作高度才能看到核心列表，有人可以帮我吗？

<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-list/core-list.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">


<polymer-element name="progress-page" attributes="hash">
    <template>
        <style>
            :host {
                display: block;
                height: 100%;
            }
            core-list .row {
                height: 90px;
                padding: 15px;
            }
        </style>
        <link rel="stylesheet" href="../../assets/css/styles.css">
        <link rel="stylesheet" href="../../assets/css/menu-card.css">
        <sidebar-layout selected="main-page">
            <div class="title">Report</div>
            <div class="page-holder" horizontal layout center center-justified>
                <div class="page-sub-title">Progress</div>
            </div>
            <div class="page-holder" horizontal layout center center-justified>
                <section layout vertical is="auto-binding">
                    <paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
                        <paper-tab inline flex center-center horizontal layout active>Terazniejszy miesiac</paper-tab>
                        <paper-tab inline flex center-center horizontal layout>Archiwum</paper-tab>
                    </paper-tabs>
                    <core-animated-pages selected="{{ selected }}" selectedindex="0" notap>
                        <section active one fit layout style="height:auto;">
                            <list-test layout vertical>
                            <div class="page-holder" horizontal layout center center-justified>
                                <p class="progress-title">Summary</p>


                            </div>

                            <div class="page-holder" horizontal layout center center-justified>
                                <div class="page-holder progress-sumarry-color " horizontal layout center
                                     center-justified>
                                    <div>Month</div>
                                    <div flex>+ x persons</div>
                                    <div>+ x points</div>
                                </div>
                           </div>


                            <core-list id="app" data="{{data}}" height="80" style="will-change: transform; overflow-y: auto;height:1000px;">
                                <template>
                                    <div class="row">
                                        List row: {{index}}, User data from model: {{model.name}}
                                        <input type="checkbox" checked="{{model.checked}}">
                                    </div>
                                </template>
                            </core-list>





                            </list-test>
                        </section>
                        <section one flex horizontal layout>

                        </section>

                    </core-animated-pages>
                </section>
            </div>
        </sidebar-layout>
    </template>

    <script>
        Polymer('progress-page', {
                    ready: function () {
                        selected: 0;
                        var app = this.shadowRoot.getElementById("app");
                        app.data = generateContacts();
                        var template = this.shadowRoot.getElementById("templ");

                        function generateContacts() {
                            var data = [];
                            for (var i = 0; i < 88; i++) {
                                data.push({
                                    name: 'dddd',
                                    string: 'asd',
                                    cardID: 'icard-' + Math.floor(Math.random() * (1000 - 1 + 1) + 1)
                                });
                            }
                            return data;
                        };
                    },
                    handleResponse: function (oldValue) {
                        if (this.response == 1) {

                        }
                        else {
                            window.localStorage.setItem("hash", '');
                            document.querySelector('app-router').go('/login?error=tokenTimeout');
                        }


                    },
                }
        );
    </script>
</polymer-element>
<progress-page></progress-page>

Answer 1

您的核心列表适合其父元素，该元素是核心页面下具有 div 元素的选定页面。确保为其父级设置正确的尺寸。