css - 在响应式布局中设置元素高度？

Question

通常，什么标记和 CSS 会在响应式设计中创建具有基于百分比高度的元素？ How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap?展示了如何创建两个 100% 高度的列，但这会因高度 < 100% 而中断。

具体来说，我有一个带有元素列表的侧边栏 div，它可能很短(空)或很长(overflow: auto)。但是因为没有父元素有固定的高度，height: 20%; 不起作用。如何在保持响应式设计的同时为侧边栏提供流畅的高度？

Answer 1

通常在父容器上有一个流体填充底部可以解决这个问题。

更多信息可以在这里找到:http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

更新:在 js bin 上 http://jsbin.com/obesuk/1/

标记:

<div class="obj-wrapper">
 <div class="content">content</div>
</div>

CSS:

  .obj-wrapper {
    position:relative;
    width:50%;
    padding-bottom:40%;
    height:0;
    overflow:hidden;
  }
  .content {
    position:absolute;
    width:100%;
    height:100%;
    background:red;
  }