Html 绝对Div自动高度不工作

我正在使用CSS3选项卡（没有JS），但遇到了一个大问题

我试图使绝对div的自动高度，以便它可以相应地扩展或收缩高度，但由于某些原因，它不起作用

我试图给我的html，身体100%的高度，但仍然没有工作。不用多说了

以下是我的相关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%，但根本不起作用

---

请帮忙

即使将高度设置为父div的100%，在本例中，

content

也没有高度。原因是，您的所有子元素都位于

absolute

位置。这会使元素脱离正常流程，使父div的高度变为0px。

您可以尝试以下方法：

.content div{
  position: relative;

}/**而不是位置：绝对

您可以选择div可见性：可见：

---

并且未隐藏选定的div可见性

使用这个：

body,html,.tabs{height:100%;}

---

因为您在选项卡中使用边距，所以边距高度将超过100%。

那么有什么解决方案可以避免这种情况？