html - 将绝对父级 div 扩展到相对子级的高度

Question

我需要使用幻灯片效果为我的 ng-view 设置动画。因此我得到了 3 个 div

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

我正在测试这些 effect .外部 div 需要是 overflow:hidden 才能让我的幻灯片效果正常工作。内部 div 需要是 absolute。如果内部 div 包含一些文本，其他 2 个 div 应该根据最内部的 div 扩展高度。就像所有 div 都是相对的一样。如何实现？

就像我的示例链接，但高度可变。

编辑:这是一个完整的其他问题，然后是“可能的”重复问题。

Answer 1

问题是你的内容的大小，你正在让你的内部 div 成为绝对的，所以 parent 不会 有任何高度。您要做的第一件事是定义元素的大小，然后您可以使用绝对元素来制作布局。

参见下面的示例，我定义了一个名为 .page 的 div，最小高度为:200px，这足以显示您的元素 (.slide)，因为如果您不这样做，您的元素 (.page)高度为0，会被overflow:hidden截断。

<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>