web-dev-qa-db-ja.com

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

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

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

csshtml5responsive-design
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