Setting element height in responsive layout?

Question

Generally, what markup and CSS will create an element with a percentage-based height in a responsive design? How to build a 2 Column (Fixed - Fluid) Layout with Twitter Bootstrap? shows how to create two 100% height columns, but this breaks for heights < 100%.

Specifically, I have a sidebar div with a list of items, which may be short (empty) or long (overflow: auto). But because no parent elements have a fixed height, height: 20%; does not work. How can I give the sidebar a fluid height while maintaining a responsive design?

Answer 1

Usually having a fluid padding-bottom on the parent container solves this problem.

More information can be found here : http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

update: on js bin http://jsbin.com/obesuk/1/

markup :

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