Javascript 纸张材料聚合物中的高度问题

我在我的项目中需要以下内容，并且我已经测试了我在互联网上找到的css的每一个组合，但我无法解决这个问题，我已经在基于polymer Starter Kit的polymer应用程序中创建了两个自定义元素：

第一个要素：

：主持人{
显示：块；
@应用（--水平布局）；
@应用（--布局换行）；
}
跨度
输入{
@应用（--paper-font-body2）；
}
律政司司长{
宽度：100%；
身高：100%；
@应用（--布局配合）；
}
.潜水舱顶部{
宽度：100%；
身高：40%；
背景#4CAF50；
}
.div组件{
宽度：100%；
身高：60%；
利润率最高：-3%；
显示器：flex；
@应用（--水平布局）；
@应用（--布局换行）；
@应用（--左右对齐的布局）
}
.h1固定{
位置：绝对位置；
左：32px；
颜色：#ffffff；
排名前10%；
@应用（--纸张字体体）；
}
.div我的登记表{
宽度：500px；
身高：100%；
最小宽度：300px；
}
.div我的注册人评论{
宽度：700px；
身高：100%；
}
.纸质材料介绍{
边界半径：2px；
高度：自动；
填充：0；
宽度：钙（98.66%）；
保证金：16px自动；
背景：白色；
最小高度：400px；
}
@介质（最大宽度：600px）{
}
/*小的*/
@介质（最大宽度：600px）{
}
无风险30天试用期
聚合物({
是：‘我的登记簿’
});

第二个要素：

：主持人{
显示：块；
@应用（--垂直布局）；
@应用（--布局换行）；
}
跨度
输入{
@应用（--paper-font-body2）；
}
.纸质材料登记表{
边界半径：2px；
高度：计算（90%-32px）；
填充：16px 16px 16px 16px；
宽度：90%；
背景：白色；
}
.纸张按钮全尺寸{
宽度：98%；
背景色：#4CAF50；
位置：相对位置；
}
.iron图标填充{
右边填充：16px；
}
让我们开始吧
继续。。。
你已经有账户了吗？请
聚合物({
是：‘我的注册会员’，
特性：{
电邮：{
类型：字符串，
通知：正确
}
}
});
函数clearInput（）{
document.querySelector（“#email”）.value=”“；
}

我的问题是：如何使第一个元素的纸张材质增加并适合其内部组件的高度。因为现在当我在手机或平板电脑中看到页面时，第二个元素中的纸张材料在纸张材料容器外展开

---

注意：css的代码是我测试过的原始代码，使用'height=auto'，change'position=relative'，但一切都有效。

谢谢大家的评论，我找到了解决方案，在第一个元素中从类中删除：

div general

la referencea:

@apply（--layout fit）

之后，为类指定一个以像素为单位的高度：

div top

。这就是所有的工作…

我认为问题出在

位置：第二个元素的绝对值，因为当你在手机上测试它时，它的元素的内容有不同的高度。试着离开
位置
属性。例如use.Thank Dmitry，我删除了position absolute，但它也不起作用，但是您的评论给出了一个想法，我发现问题是类div general的第一个元素中的属性position=absolute，但现在我有其他问题，我更新了code@Dmitry，我更改了代码（代码已更新），现在我在类div general
@apply（--layout-fit）中有了这个属性如果我删除此属性，纸卡将相应展开，但不要显示绿色的div，该div仅在常规div处于绝对位置时显示，所有这些都在第一个元素中。
<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>