web-dev-qa-db-ja.com

CSS-divに高さを継承させる

私はdivの高さと幅がコンテンツに依存する角の丸いボックスを作成しようとしているので、自動的に調整されます...

ここに例を見ることができます: http://pastehtml.com/view/1duizyf.html

問題は、「test_mid_left」(黒い背景)と「test_mid_right」(ターコイズ色の背景)を取得して、「test_mid_center」(緑の背景)から高さを継承できないことです。私は身長:100%と自動を試しましたが、何も動作しません。では、コンテンツから高さを継承させるにはどうすればよいですか?

(例の左右のコンテンツで「min-height:xx」を使用した理由は、私が話しているボックスを示すためだけです)

18
donpedroper

既に述べたように、これはフロートでは行えず、高さを継承できず、兄弟を認識できないため、たとえば、サイド2つのフロートは中央のコンテンツの高さを知らないため、継承できません何からでも。

通常、継承された高さは、明示的な高さを持つ要素か、height: 100%;は表示ツリーを介して渡されます。「ツリー」の最上部から来ていない高さを渡すのは、絶対的に配置された要素-たとえば、右上と左下のすべての辺と角を絶対に配置することができます(とにかく角の高さと幅を知っています)そして、あなたが知っているように(の幅左/右の境界線)と上/下の境界線の高さ)、および上/下の中心の幅は100%で簡単です-計算が必要なのは、コンテンツが大きくなる場合の右/左の高さだけです-

これを行うことができます、IE6の4つの位置決め座標すべてを使用しなくても /7 サポートしていません

私はあなたが与えたものに基づいて例を挙げました、それは固定幅(あなたのフレーム)に依存していますが、私はそれが柔軟な幅でも動作すると思いますか?これの使用は、複数の背景画像または画像の境界線が完全に利用可能になるまでサポートできない派手な画像の境界線に適している可能性があります。

概念実証の例はここ

27
clairesuzy

問題

エレメントがフロートされると、フロートがフローから削除されるため、親にはエレメントが含まれなくなります。フロート要素は自然な流れから外れているため、すべてのブロック要素はフロート要素がそこにないかのようにレンダリングされるため、親コンテナはフロート子要素を保持するために完全には展開されません。

次の記事を参照して、CSS Floatプロパティの仕組みを理解してください。

CSS Floatプロパティの謎


潜在的な解決策

さて、次の記事はあなたがやろうとしていることと似ていると思います。それを見て、問題を解決できるかどうかを確認してください。

クロスブラウザーCSSを使用した高さの等しい列

これがお役に立てば幸いです。

8
Hristo

負のマージントリック:

http://pastehtml.com/view/1dujbt3.html

エレガントではないと思いますが、場合によっては機能します。

0
user255594