Setting element height in responsive layout?

问题

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?

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

回答2:

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/

来源：https://stackoverflow.com/questions/9432029/setting-element-height-in-responsive-layout