34

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?

Community
  • 1
  • 1
knite
  • 6,033
  • 6
  • 38
  • 54

2 Answers2

47

Update: 2022

You can use aspect-ratio css property to achieve this.

Codepen example: https://codepen.io/chriscoyier/pen/rNOqdJd

Old solution

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;
  }
Varinder
  • 2,634
  • 1
  • 17
  • 20
-1

Have you tried the inline-block property with vertical-align: top? I recently saw this article that may help you with your problem. Normally height just resizes to fit the content so I'm not exactly sure what you're trying to accomplish. Check this article out... http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

arnonate
  • 495
  • 4
  • 11
  • Sorry, your linked article doesn't address my issue. In a fixed layout, I can assign a height of, say, 500px to an element. In a responsive layout, I want to assign a height of 50%, which doesn't work. – knite Mar 01 '12 at 14:57