私は、次の構造を持つ、複数の "ブロック"を埋め込んでいます(この特定のケースではフレックスを使用しています):潜在的なトップオフセットに関係なく、ルートの親の高さをとる子divs
- 親(JSFIDDLE青)
- 容器:マージントップ:32PX、(赤)
- ROW1:オレンジ(150ピクセルの高さ、幅:100%)
- ROW2。ヴィオこれは、次のサンプル・コードに示されている
- 容器:マージントップ:32PX、(赤)
:(100%、そして残りの高さを取ると):聞かせて
jsfiddle example 1 -- not working
私は "すべての埋め込み" のdivにしたいです指定された高さ(オレンジのdiv/row1の場合は150pxなど)を持つか、親コンテナ内のすべての「残りの」使用可能な高さを使用します。しかし、あなたがjsfiddleで見ることができるように、それは動作しません:row2は必要な高さを持っていません。
私はそれが100%に設定されている親の高さでのみ完全な高さを取ることを理解します。 container
でこれを行うと、コンテナのmargin-top
が32pxに設定されているため、container
とrow2
の高さはparent
であり、これは親の下境界線に描画されます。
jsfiddle example 1 -- not working either with height:100% on container
がどのように私はそれを修正することができます。これはjsfiddleのこのフォークにあったのですか?適切なアプローチは何ですか?
メイクセンス、おかげでたくさん私はフレックスの実験だった:確かに1と私はどこかに+1 'カルク(100% - 32PX)を示すためになっていた実現し'。私はこれが存在するのか分からなかった。 – user18490