web-dev-qa-db-ja.com

レスポンシブレイアウトで要素の高さを設定しますか?

一般に、レスポンシブデザインでパーセンテージベースの高さを持つ要素を作成するマークアップとCSSは何ですか? Twitter Bootstrapを使用して2列(固定-流体)レイアウトを作成する方法 は、100%の高さの2つの列を作成する方法を示していますが、これは100%未満の高さでは壊れます。

具体的には、アイテムのリストを含むサイドバーdivがあり、これは短い(空)または長い(overflow: auto)。ただし、親要素には高さが固定されていないため、height: 20%; 動作しません。レスポンシブデザインを維持しながら、サイドバーに流動的な高さを与えるにはどうすればよいですか?

33
knite

通常、親コンテナ上に液体のパディングの底があると、この問題は解決します。

詳細については、こちらをご覧ください: http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/

更新:js bin http://jsbin.com/obesuk/1/

マークアップ:

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