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?