这是我的 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
最佳答案
如果您将 .field 更改为此,它的工作
.field {
width: 100%;
height: 250px;
position: relative;
border-radius: 10px;
border: 2px solid red;
}
div 字段,高度必须大于 .jabudunapoveda 的高度
关于css - 绝对定位的 child 与边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38809393/