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必须绝对定位
为什么使用class .field的div上的红色边框只有0px高度？
.field的高度未知。

目标是使用class .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

的高度

绝对定位的孩子与边界

1 个答案: