javascript - 纸质 polymer 的高度问题

Question

我的元素需要以下内容，我真的测试了我在互联网上找到的每一种 css 组合，但我无法解决这个问题，我在基于 polymer 的应用程序中创建了两个自定义元素在 polymer 入门套件上:

第一个元素:

<dom-module id="my-register">
    <template>
        <style is="custom-style" include="iron-flex iron-flex-alignment">
            :host {
                display: block;
                @apply(--layout-horizontal);
                @apply(--layout-wrap);
            }
            span,
            input {
               @apply(--paper-font-body2);
            }
            .div-general{
                width: 100%;
                height: 100%;
                @apply(--layout-fit);
            }
            .div-top{
                width: 100%;
                height: 40%;
                background: #4CAF50;
            }
            .div-component{
                 width: 100%;
                 height: 60%;
                 margin-top: -3%;
                 display: flex;
                 @apply(--layout-horizontal);
                 @apply(--layout-wrap);
                 @apply(--layout-around-justified)
              }
            .h1-fixed{
                position: absolute;
                left: 32px;
                color: #ffffff;
                top: 10%;
                @apply(--paper-font-body);
            }
            .div-my-register-form{
                width: 500px;
                height:100%;
                min-width: 300px;
            }

            .div-my-register-peoplecomment{
                width: 700px;
                height:100%;
            }

            .paper-material-presentation {
                border-radius: 2px;
                height: auto;
                padding: 0 0 0 0;
                width: calc(98.66%);
                margin: 16px auto;
                background: white;
                min-height: 400px;
              }

              @media (max-width: 600px) {

              }

            /* Small */
            @media (max-width: 600px) {

            }
        </style>
        <paper-material elevation="1" animated="true" class="paper-material-presentation">
            <div class="div-general">
                <div class="div-top">
                    <h1 class="h1-fixed">Risk-Free 30 Days Trial</h1>
                </div>
                <div class="div-component">
                    <div class="div-my-register-form">
                        <my-registerform></my-registerform>
                    </div>
                    <div class="div-my-register-peoplecomment">
                        <my-peoplecomment></my-peoplecomment>
                    </div>
                </div>
            </div>
        </paper-material>
    </template>
    <script>
        Polymer({
            is: 'my-register'
        });
    </script>
</dom-module>

第二个元素:

<dom-module id="my-registerform">
    <template>
        <style is="custom-style">
            :host {
                display: block;
                @apply(--layout-vertical);
                @apply(--layout-wrap);
            }
            span,
            input {
               @apply(--paper-font-body2);
            }
            .paper-material-register-form {
                border-radius: 2px;
                height: calc(90%-32px);
                padding: 16px 16px 16px 16px;
                width: 90%;
                background: white;
            }
            .paper-button-fullsize{
                width: 98%;
                background-color: #4CAF50;
                position: relative;
            }
            .iron-icon-padding{
                padding-right: 16px;
            }
        </style>
        <paper-material elevation="1" animated="true" class="paper-material-register-form">
            <h1>Let's Get Started</h1>
            <paper-input label="Enter your email" id="email" required value="{{email}}">
                <iron-icon icon="mail" prefix class="iron-icon-padding"></iron-icon>
                <paper-icon-button suffix onclick="clearInput()" icon="clear" alt="clear" title="clear" />
            </paper-input>
            <paper-button raised id="bt_register" class="paper-button-fullsize">
                Continue...
                <iron-icon icon="arrow-forward" suffix></iron-icon>
            </paper-button>
            <span>Have an account already? Please <a href="login.html">Login</a></span>
        </paper-material>
    </template>
    <script>
        Polymer({
            is: 'my-registerform',

            properties: {
                email: {
                  type: String,
                  notify: true
                }
            }

        });
        function clearInput () {
            document.querySelector('#email').value="";
        }
    </script>

我的问题是:如何使 First Element 的纸质 Material 增加并适应其中组件的高度。因为现在当我在手机或平板电脑中看到页面时，第二元素 中的纸质 Material 会扩展到纸质 Material 容器之外。

注意:css 代码是我测试的原始代码，使用`height=auto`，更改`position=relative`，但一切正常。

Answer 1

谢谢大家的评论，我找到了解决方案，在第一个元素中从类中删除:div-generalla referencia a: @apply (--layout-fit); 然后为类分配一个以像素为单位的高度:div-top。这就是一切正常的......