CODEWITHSUNDEEP
csshtmlresponsive-design
knite
knite

Reputation: 6171

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?

Upvotes: 34

Views: 97512

Answers (2)

Varinder
Varinder

Reputation: 2664

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

Upvotes: 47

arnonate
arnonate

Reputation: 495

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/

Upvotes: -1

Related Questions