Проблема с переходом CSS между высотой: 100px на авто

Question

A div фиксированной высоты содержит элемент с большим содержанием, чем он может содержать.В неактивном состоянии (мышь не находится над ним) этот div будет на высоте 100px, а нижняя часть контента будет видимой.

Когда эта div наведена, все содержимое внутри должно скользить вниз ибыть показано.Я пробовал много способов добиться этого, применяя объявления top и bottom, используя max-height и используя другие методы.NB. Содержимое внутри имеет неизвестную / изменяющуюся высоту.

Однако до сих пор все мои методы были неудачными в создании необходимого эффекта.

Вот ссылка одного из моих методов:http://jsfiddle.net/fLuHL/Он скользит вверх, а не вниз.

Answer 1

Поскольку при переходах не учитывается высота = auto, я обычно использую translateY для достижения того же эффекта.

Вот код: http://jsfiddle.net/5oL3gf7n/

Я только изменяю CSS вашего кода на:

.post-container {
display: block;
height: auto;
position: relative;
margin-top: 0;
z-index: 496;
transition: transform .5s;
    -moz-transition: transform .5s;
    -webkit-transition: transform .5s;
    -o-transition: transform .5s;
transform: translateY(calc(100px - 100%));
}

.text {                        
background-color: #666 !important;
padding: 20px;
}

.post-container:hover {
transform: translateY(0);
}

Answer 2

Я не уверен, что это то, что вам нужно, но ... здесь обновлена ​​скрипка

Я добавил top свойства в css.