css - CSS 100% div の高さ

Question

私の問題のためにフィドルを作成しました： http://jsfiddle.net/XJpGT/

緑のボックスの高さは常に 100% である必要がありますが、同時に緑とオレンジのボックスが青よりも大きくなってはいけません。理解を深めるために画面を作成しました：

これは可能ですか？コンテンツは動的であるため、すべてのボックスの高さが異なる場合があります。

次のコードで達成しようとしましたが、フィドルでわかるように、私が望むように機能していません。

.right1:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;         
}

score 1 · Accepted Answer

私はあなたのフィドルを更新しました。ここを見てください：http://jsfiddle.net/avrahamcool/XJpGT/1/

height緑のdivとオレンジのdiv（およびmarginそれらの間）を手動で分割する必要があるため、私の解決策は完璧ではありません。(デモでは、緑に 80%、オレンジに 10%、余白に 5% を割り当てました) しかし、目標にできるだけ近づけることができます。

更新: filddle を更新しました。こちらをご覧ください: http://jsfiddle.net/avrahamcool/XJpGT/4/

高さを指定する必要がなくなりました。このトリックはfaux columnと呼ばれ、ウェブ全体で読むことができます。

で.right2:before, .right2:after周囲の余白right2を px で指定します。

1 に答える 1