子divの自動高さを設定できますか？（親の100％ではない）

子divの高さを、親の他のコンポーネントが使用していない残りの高さに単純に設定することはできますか？下の例では、.bodyは20pxのようにしか見えません。なぜなら、それは内側のhtmlにそれほど多くを使用しているからです。 .bodyが.parentの未使用の高さを自動的に消費することは可能ですか？例えば.parent 200px - .head 30px - .foot 30px = .body 120px？子divの自動高さを設定できますか？（親の100％ではない）

以下のサンプルでは、使用されているスペースよりもはるかに大きい.parentイエローボックスが表示されます。 .bodyを "height：100％"に設定すると、親の高さが使用され、.headまたは.foot要素は無視されます。

<html> 
<head> 
<style type="text/css"> 
.parent { 
    width: 200px; 
    height: 200px; 
    background-color: yellow; 
} 

.head { height: 30px; background-color: blue; } 

.body { background-color: #999; } 

.foot { height: 30px; background-color: green; } 

</style> 
</head> 
<body> 
<div class="parent"> 
    <div class="head">I'm the head</div> 
    <div class="body">I'm the body</div> 
    <div class="foot">I'm the foot</div> 
</div> 
</body> 
</html>

これは一例です。私のプロジェクトでは、.parentの高さは.parent要素でのみ合理的に設定できます。さらに、.parentの高さは基本的にバックエンドコードによって動的に設定されます。 3つの内部部門の組織は、身体が折り畳まれ、頭と足の角が丸くなっているからです。

ご意見はありがとうございます。

出典

2012-03-26 garlicman

はい私は。ボディは、親の高さに合わせてスケーリングする必要があります。親には高さを管理するクラスが割り当てられます。 – garlicman

これは負のマージンで簡単に達成できます。

セット.body.headと.footの高さが知られていると仮定すると、高さ
% 100に、あなたは.headと.footのそれぞれの高さに等しい負の最上部+下部の余白を追加することができます。
ソースオーダーのため、.bodyは.headを「カバー」します。これに対処するには、position: relativeを.headに追加します。
体の内側の内容を少し下にシフトする必要があります。埋め込みを.bodyに直接追加することはできません。さらに、パッドの上端+下端を希望の高さに設定して、.bodyの内側に別のダイビングを追加してください。上記の例の

Demo here

バリアント：

設定.body 100％の高さ
.headと.footの高さが知られていると仮定すると、あなたは負の下マージンを追加することができます.headと.footの合計に等しい。
.bodyは親の外側に流れようとしますので、親にoverflow: hiddenを追加してください。

Demo here

出典

2012-03-26 18:01:02

負のマージンで間違っているのは、罫線には影響しないということだけです。 100％の高さ+負のマージンを持つdivにボーダーを追加すると、高さは予想通りになりますが、ボーダーは親の高さ全体を継続します。またデモでは、マージントップがボディを頭の後ろにポップアップさせます。（本文のテキストは頭の後ろにあります）マージンボトム：-30pxのみにする必要があります。（おそらくこれはブラウザの違いです） – garlicman

100％の高さの要素に2pxの上端+下端を追加すると、その高さは100％+ 4pxになります。境界線のサイズをマージンに含める必要があります。第2号については、ノート＃4を見てください。またはその問題を回避する2番目のデモ –

時間内に上記のコメントを編集できませんでした。ボディトップ30pxがヘッダーの後ろに隠れているため、デモでは機能しません。 margin-top：-30px;上部を切り取っています。 margin-bottom：-60pxに切り替えると高さは正しいが、表示されている背景が親の高さで止まっていないことに気付くだろう。例えば30pxが長すぎます。 .body overflow：隠されていても、負のマージンは尊重されず、背景色は表示されます。http://jsfiddle.net/SRXqC/2/ – garlicman

これを達成する方法は現在2つあります。両方ともやや不満足です。

最初に、JSを介してDOM情報を使用して残りの高さを計算します。

2番目はCSS3フレックスボックスと呼ばれ、完全に機能しますが、現在はごくわずかですsupportの未熟な仕様です。

これはCSS 2.1を使用して行うことはできません。その理由は、CSSがあまりにもひどく吸う理由の1つです。

出典

2012-03-26 17:49:33

フレックスボックスは、一般的なCSSの問題に対する解決策をどのくらいの頻度で提供しているのか興味深いですが、サポートはほとんどありません。 – mikevoermans

@mikevoermansそれはMozillaのXULフレキシブルボックスから進化した複雑な仕様です。 MozillaとWebkitはどちらも、現在、仕様のアップデート版のそれぞれの実装を積極的に進めています。 –

申し訳ありませんが、私はJSの使用を避けたいと述べたはずですが、私はそれが醜いアプローチだと既に認めていると思います。 – garlicman

子divの自動高さを設定できますか？ （親の100％ではない）

答えて

関連する問題

子divの自動高さを設定できますか？（親の100％ではない）