jquery - 残りの垂直スペースを埋める 2 番目の要素

Question

高さが固定されたコンテナがあります。

コンテナーには 2 つの段落があります。

内容に応じて最初pの動的な高さ (min-height と max-height) を持ち、2 番目の p が残りの垂直スペースを占有するようにします。

たとえば、このフィドルでは、ピンクの p で残りの黄色のスペースを埋め、最初の p 要素が大きくなるとそれに応じて縮小する必要があります。

div を取得して水平方向のスペースを埋める方法 (つまり、bfcブロックの書式設定コンテキスト) を見てきましたが、垂直方向のフィラーの css ソリューションが見つからないようです。

これが css でできない場合、jquery でこれを行う方法を知りたいです。

ありがとう。

score 7 · Accepted Answer

このように2番目のピンクのdivを使用できます

.two
{
    background-color: pink;
    height: inherit;
}

score 1 · Accepted Answer

jqueryを使用すると、次のことができます。試してみてください。

var fillRemaining = $("p.one").parent().height() - $("p.one").height();
$(".p.two").css('height',fillRemaining);

完了...頑張ってください

score -2 · Accepted Answer

あなたが扱っているなら、あなたはこのトリックbackground colorsをすることができます

4 に答える 4