Развернуть абсолютный родительский div до высоты относительного ребенка

Question

Мне нужно анимировать мой ng-view с эффектом слайда. Поэтому я получил 3 дивы

<div style="overflow:hidden"> 
    <div ng-view style="position:absolute"> 
     <div style="position:relative"> LONG CONTENT </div> 
    </div> 
</div> 

I'm тестирования этих effect. Внешний div должен быть overflow:hidden, чтобы мой слайд работал. Внутренний div должен быть absolute. Если внутренний div содержит некоторый текст, другие 2 divs должны расширять высоту в соответствии с самым внутренним div. То же самое, когда все divs будет относительным. Как достичь этого?

Как в моем примере ссылка, но с переменной высотой.

EDIT: Это полный другой вопрос, а затем «возможный» дубликат.

Answer 1

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

см. Пример ниже, я определяю div с именем .page с min-height: 200px, этого будет достаточно, чтобы отобразить ваш элемент (.slide), потому что если вы этого не сделаете, ваш элемент (.page) высота будет 0, и она будет вырезана путем переполнения: скрыта.

<style> 
 
    .page { 
 
    background-color: #DDD; 
 
    overflow: hidden; 
 
    position: relative; 
 
    min-height: 200px; 
 
    } 
 

 
    .slider{ 
 
    position: absolute; 
 
    } 
 

 
    .slide{ 
 
    position: relative; 
 
    } 
 
</style> 
 

 
<div class="page"> 
 
    <div class="slider" ng-view> 
 
     <div class="slide"> LONG CONTENT </div> 
 
    </div> 
 
</div>