html - 绝对 Div 自动高度不起作用

Question

我正在处理 CSS3 选项卡(没有 JS)并且遇到了一个大问题。

我正在尝试设置绝对 div 的自动高度，以便它可以相应地扩展或缩小高度，但由于某些原因它不起作用。

我试图为我的 html,body 提供 100% 的高度，但仍然无法正常工作。不用多说，Here is JS fiddle .

这是我的相关 CSS:

.content {
    background: #3404FC;
    position: relative;
    width: 100%;
    height: 200px;
    z-index: 5;
    box-shadow: 0 -2px 3px -2px rgba(0,0,0,0.2), 0 2px 2px rgba(0,0,0,0.1);
    border-radius: 0 3px 3px 3px;
}

.content div {
    position: absolute;
    top: 0;
    left: 0;
    /* padding: 10px 40px; */
    z-index: 1;
    opacity: 0;
}

如您所见，蓝色背景是高度，所以为什么它不采用自动高度。我尝试了 100%，但它根本不起作用。

请帮忙!

Answer 1

你可以试试这个:

.content div{
  position: relative;

}/**代替position: absolute;

您可以选择 div 可见性:可见:和未选择的 div 可见性隐藏；