css - 绝对定位的 child 与边界

Question

这是我的 html:

<div class="xoxo">
        <div class="field">
            <label for="xo">Destination</label>
            <input class="animatedinput" type="text" id="xo" />
            <div class="jabudunapoveda">Here</div>
        </div>
    </div>

这里是 css:

.animatedinput {
    padding: 1em 0 1em 2em;
    position: absolute;
    border: 0;
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 3;
    border-radius: 10px;
}
.field {
    width: 100%;
    height: auto;
    position: relative;
    border-radius: 10px;
    border: 2px solid red;

}
label {
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 2em;
    top: 0;
    left: 1.5em;
    z-index: 4;
}
.jabudunapoveda {
    width: 100%;
    height: 200px;
    line-height: 200px;
    top: 20px;
    position: absolute;
    background: #f4f4f4;
    display: block;
    border-radius: 0 0 10px 10px;
    z-index: 2;
}
.xoxo {
    width: 50%;
    margin: 100px auto 4em;
    z-index: 2;
    height: auto;
    border-radius: 10px;
}

• 类 jabudunapoveda 的 Div 必须绝对定位
• 为什么带有 .field 类的 div 上的红色边框只有 0px 高度？
• .field 的高度未知。

目标是使 .field 类高度为 100% 的 div，以便红色边框在 jabudunapoveda div 的底部结束。

这里是 codepen

Answer 1

如果您将 .field 更改为此，它的工作

.field {
    width: 100%;
    height: 250px;
    position: relative;
    border-radius: 10px;
    border: 2px solid red;

}

div 字段，高度必须大于 .jabudunapoveda 的高度