Переход с высоты: 100px до 100% игнорирует переход?

Question

У меня есть 3 текстовых divs, которые должны иметь переход с высотой. Пример здесь: http://jsfiddle.net/oLr7j7w5/

В тексте пока нет текста, так что я просто хочу дать ему высоту: авто; на hover, но если я это сделаю, переход исчезнет, ​​и он будет выглядеть следующим образом: (i только изменил высоту с px на авто!) http://jsfiddle.net/xbpqphzz/

Кто-нибудь знает, как я могу это исправить? Heres мой код (я удалил текст)

<div id="extrawurstmain"> 
    <div id="tcontent"> 
     <a class="font" id="ttext"> 
     </a> 
    </div> 
    <div id="mcontent"> 
     <a class="font" id="mtext"> 
           </a> 
    </div> 
    <div id="bcontent"> 
     <a class="font" id="btext"> 
     </a> 
    </div> 

#tcontent{ 
    float: left; 
    background-color: rgba(105, 105, 105, 0.5); 
    border-bottom: 3px solid #FFD000; 
    height: 150px; 
    width: 100%; 
    margin-top: 100px; 
    transition: height 0.5s ease; 
    overflow: hidden; 

} 

#mcontent{ 
    float: left; 
    background-color: rgba(105, 105, 105, 0.5); 
    border-bottom: 3px solid #FFD000; 
    width: 100%; 
    height: 150px; 
    transition: all 0.5s ease; 
    overflow: hidden; 
    position: relative; 
    transition: all 0.5s ease; 


} 

#bcontent{ 
    float: left; 
    background-color: rgba(105, 105, 105, 0.5); 
    border-bottom: 3px solid #FFD000; 
    width: 100%; 
    height: 150px; 
    transition: height 0.5s ease; 
    overflow: hidden; 
} 

#tcontent:hover{ 
    height: 250px; 

} 

#mcontent:hover{ 
    height: 250px; 

} 


#bcontent:hover{ 
    height: 250px; 

} 

#ttext{ 
    color: blue; 
} 

#mtext{ 
    color: green; 
} 

#btext{ 
    color: yellow; 
} 

Answer 1

Вы не можете смешивать единицы. Вы можете только перейти от px к px,% to%, em к em ... у вас есть идея.

Однако, если вам действительно нужно перейти от% к px, то не обойти JS-анимацию ...

Answer 2

Проблема в том, что вы не можете использовать высоту 100% из-за отсутствия ее содержания.

Вы можете использовать Javascript (я бы избежать):

<script> 
var newheight = $('#innerdiv').css('height'); 
$('#mainwrapper').css('height', newheight); 
</script> 

или

UPDATE

div.works { 
    height:20px; 
max-height:20px; 
    display:block; 
    overflow:hidden; 
    -webkit-transition: max-height 0.5s linear; 
} 
div.works:hover { 
    height:100%; 
    max-height: 200px; 
    -webkit-transition: max-height 0.5s linear; 
} 

http://jsfiddle.net/LGDWP/168/ Этот метод работает для%, но вам нужно установить максимизаторами высота. Одна из возможностей - установить максимальную высоту JavaScript с помощью другого метода, описанного выше.