根据容器自动缩放输入字段高度答案

【问题标题】：Auto scaling input fields height depending on container根据容器自动缩放输入字段高度
【发布时间】：2020-06-22 09:21:07
【问题描述】：

有人可以举例说明如何根据容器高度缩放输入字段吗？例如，我正在增加屏幕尺寸，我的 div 容器（宽度 && 高度）会根据屏幕尺寸增加，但我无法根据我的 div 容器来管理它以增加输入字段的高度属性。输入字段的宽度会自动增加。所以从字面上看，高度值总是一样的。

为了简单明了，div 容器越大，输入字段的高度值会根据 div 容器的完整值而增加。我在 div 容器中有 3 个输入字段。

这还有可能吗？因为在更大的屏幕上，输入字段的高度看起来非常小。我知道媒体查询，但在这种情况下，它们没有帮助。我需要很多媒体查询，具体取决于不同的大小，比如每 100 像素。

    <body>
    <div class="flex">
    <div class="div">
        <h2>Container1</h2>
        <form action="">
            <input type="text">
            <input type="text">
            <input type="text">
        </form>
    </div>

    <div class="div">
        <h2>Container1</h2>
    </div>
</div>
</body>

body,html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: grey;
}

.flex{
    display: flex;
    width: 80%;
    flex-direction: row;
}

.div{
    padding: 2rem;
    flex: 50%;
    height: 50vh;
}

.div input{
    width: 100%;
    padding: 0.5rem 0;
    margin: 0.5rem 0;
}

【问题讨论】：

您能给我们举个例子吗？
好的，请稍等
我不知道如何添加正在运行的 html/css 代码。重点是根据 div 容器的高度来增加输入字段的高度。因为现在，输入字段的宽度大小会自动增加，而高度就像“固定”一样。高度不随 div vh 缩放。

标签： html css

【解决方案1】：

这能解决你的问题吗？

body,html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: grey;
}

.flex{
    display: flex;
    width: 80%;
    flex-direction: row;
}

.div {
    padding: 2rem;
    flex: 50%;
    height: 70vh;
    display: flex;
    flex-direction: column;
}

.div form {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.div input{
    width: 100%;
    padding: 0.5rem 0;
    margin: 0.5rem 0;
    height: 100%;
}

<body>
    <div class="flex">
    <div class="div">
        <h2>Container1</h2>
        <form action="">
            <input type="text">
            <input type="text">
            <input type="text">
        </form>
    </div>

    <div class="div">
        <h2>Container1</h2>
    </div>
</div>
</body>

【讨论】：