Question

我正在研究一个CSS3标签（没有JS），并且遇到了很大的问题。

我试图制作绝对div的自动高度，以便它可以按比例扩展或缩小高度，但由于某些原因它无法正常工作。

我试图给我的html，身体提供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可见性隐藏;

Answer 2

即使您将高度设置为父div的100％，在这种情况下content也不会有高度。原因是，您的所有子元素都位于absolute。这使得元素超出正常流量，使父div的高度为0px。

Answer 3

使用此功能：

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

因为你在标签中使用了边距，所以它的高度将超过100％。

绝对Div自动高度不起作用

3 个答案: