2017-09-26 5 views
0

私は、次の構造を持つ、複数の "ブロック"を埋め込んでいます(この特定のケースではフレックスを使用しています):潜在的なトップオフセットに関係なく、ルートの親の高さをとる子divs

  • 親(JSFIDDLE青)
    • 容器:マージントップ:32PX、(赤)
      • ROW1:オレンジ(150ピクセルの高さ、幅:100%)
      • ROW2。ヴィオこれは、次のサンプル・コードに示されている

:(100%、そして残りの高さを取ると):聞かせて

jsfiddle example 1 -- not working

私は "すべての埋め込み" のdivにしたいです指定された高さ(オレンジのdiv/row1の場合は150pxなど)を持つか、親コンテナ内のすべての「残りの」使用可能な高さを使用します。しかし、あなたがjsfiddleで見ることができるように、それは動作しません:row2は必要な高さを持っていません。

私はそれが100%に設定されている親の高さでのみ完全な高さを取ることを理解します。 containerでこれを行うと、コンテナのmargin-topが32pxに設定されているため、containerrow2の高さはparentであり、これは親の下境界線に描画されます。

jsfiddle example 1 -- not working either with height:100% on container

がどのように私はそれを修正することができます。これはjsfiddleのこのフォークにあったのですか?適切なアプローチは何ですか?

答えて

0

ここで2つの主なものは、.board_divider_bottomからheight: 100%を削除してから、flex-grow: 1を追加します。ここでflex-grow: 1は空き容量を確保します。

html, body { 
 
    margin: 0; 
 
} 
 

 
.parent { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    box-sizing: border-box; 
 
    border: 3px solid blue; 
 
} 
 

 
.board_container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    border: 2px solid red; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    margin-top: 32px; 
 
    height: calc(100% - 32px);   /* changed, reduce with margin-top */ 
 
} 
 

 
.board_divider_top { 
 
    border: 2px solid orange; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
    height: 150px; 
 
} 
 

 
.board_divider_bottom { 
 
    flex-grow: 1;      /* added, fill remaining space */ 
 
    border: 2px solid violet; 
 
    box-sizing: border-box; 
 
    width: 100%; 
 
}
<div class="parent"> 
 
    <div class="board_container"> 
 
    <div class="board_divider_top"></div> 
 
    <div class="board_divider_bottom">I want this to take all the remaining height</div> 
 
    </div> 
 
</div> 
 
<!-- parent -->

+0

メイクセンス、おかげでたくさん私はフレックスの実験だった:確かに1と私はどこかに+1 'カルク(100% - 32PX)を示すためになっていた実現し'。私はこれが存在するのか分からなかった。 – user18490

関連する問題