向div添加元素会使其上升

Question

我有一个带有标题和内部内容div的包装div。出于某种原因，当内容内容div为空时，它看起来像这样：

然后当我添加一些元素时，div似乎会升到我想要的正确位置：

这对我来说真是令人费解，如果有人可以解释这种奇怪的行为，我会非常感激。

这是包装器和内部div的css：

#wrapperDiv {
    display: inline-block;
    position: relative;
    width: 25vw;
    top: 5%;
    left: 4%;
    text-align: center;
    border: 1px solid red;
}

#innerList {
    width: 100%;
    border: 1px solid yellow;
}

如果有任何其他信息有帮助，请告诉我们。

Answer 1

您可以根据需要设置黄色div的高度：

#innerList {
    width: 100%;
    height: 30px;
    border: 1px solid yellow;
}