Absolute Div auto Высота не работает

Question

Я работаю над вкладками CSS3 (без JS) и имею большую проблему.

Я пытаюсь сделать автоматическую высоту абсолютного div, чтобы он мог расширяться или сжиматься по высоте, но по некоторым причинам он не работает.

Я попытался дать высоту 100% моему html, но все еще не работает. Без лишних слов, 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; 

}/** вместо позиции: абсолютный;

Вы можете выбрать видимость div: visible: и не выбранная видимость div скрыта;

Answer 2

Даже если вы установили высоту на 100% от родительского div, в этом случае content он не будет иметь высоту. Причина в том, что все ваши дочерние элементы расположены absolute. Это заставляет элементы выходить из нормального потока, делая высоту родительского div равным 0px.

Answer 3

Используйте это:

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

Поскольку вы используете маржу в закладках, его высота будет более Тана 100%.