Question

我对Polymer（以及网络编程）都很陌生，而且我在核心动画页面上遇到了麻烦。

我在div中有一组自定义元素，使用％表示高度和宽度。然后我尝试将所有内容包装到核心动画页面中 - 如果我没有设置特定高度 - 它会将高度折叠到0px。宽度一如既往地工作得很好。

以下是我的CSS的一部分：

#tiles-container
    {
        padding-left: 1%;
        height: 85%;
        width: 98%;
        border: 2px;
        border-color: Black;
    }
main-menu-item
    {
        box-sizing: border-box;
        float: left;
        margin: 1%;
    }
@media (min-height:500px)
    {
        main-menu-item
        {
            height: 30%;
        }
    }
@media (max-height:600px)
    {
        main-menu-item
        {
            height: 135px;
        }
    }

其中main-menu-item是我自己的组件。当屏幕高度小于600px时，它可以正常工作，但屏幕高度不高。这是我的HTML的一部分：

<core-toolbar>
    ...
</core-toolbar>
<div class="container" style="overflow-y: auto;" flex>
    <core-animated-pages flex id="pages" selected="0" on-core-animated-pages-transition-end="{{transitionend}}"
        transitions="cross-fade-all hero-transition">
        <section>
            <div id="tiles-container" class="tiles-container" layout wrap horizontal around-justified center relative>
                //mi custom elements just thrown in here
                ...
            </div>
        </section>
    </core-animated-pages>
</div>
<core-toolbar>
     ...
</core-toolbar>

如果有人给我一个解决方案，而不是给我的自定义元素一个静态高度，那就太棒了。感谢阅读并抱歉我的英语！ ^^û

Polymer Core Animated Pages在元素高度内设置为0

0 个答案: