HTMLはdivの私はそれに2つのdivタグで大きなdiv要素を表示するには、上記のコードを使用し

Question

div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

の高さを拡張します。最初のものはposition: absoluteを使ってdivの左下に置きます。

2番目の灰色の高さを最初の5ピクセル上に延長できますが、正確な高さをピクセルで測定する必要はありません（下の写真のように）。私は例えばheight: 50px;を設定することができますが、別の方法がありますか？

Answer 1

私は絶対位置ではなく（以下CSSのコメント）

div.div1 { 
 

 
    display: flex; 
 
    flex-direction:column; 
 
    /* add the above styles*/ 
 
    
 
    border: 1px solid black; 
 
    min-height: 100px;   /*I would also change this to min-height otherwise it may cause issues if your text goes to 2 lines*/ 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    flex-grow:1;  /* make div grow to fill the space */ 
 
    margin-bottom:5px; /* minus the amount of margin you wanted */ 
 
    
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
} 
 

 
div.div3 { 
 
    /* remove absolute positioning */ 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

Answer 2

あなたは以下の私のスニペットのようにheight設定にcalcを使用することができます。その設定は、距離の下側のDIVマイナス（5 + 2）の高さ、ボーダーおよびボトムと、親のパディングの最初のDIVマイナス10pxの境界の100％マイナス（20 + 10 + 2）最大49ピクセル。

div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    height: calc(100% - 49px); 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

Answer 3

EDIT：私はあなたがshown by Peteは間違いなく私が怒鳴る示してきたものよりもクリーンなアプローチであるとフレキシボックスの道を進んで、近代的なブラウザの機能に焦点を当てることができれば、ことを示唆しています。それは、ここで言われている代替手段です：

あなたが動的にdiv2の高さを決定するためにcalcを使用することができます。

div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    height: calc(
 
    100% 
 
    - 20px /* div1: padding top and bottom */ 
 
    - 2px /* div1: border top and bottom */ 
 
    - 20px /* div3: height */ 
 
    - 2px /* div3: border top and bottom*/ 
 
    - 5px /* desired separation*/ 
 
); 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

あなたがあれば、あなたの計算でパディングとボーダーの幅など、回避することができますdivのbox-sizingをborder-box（You might want to set this for all elements）に設定します。

div { 
 
    box-sizing: border-box; 
 
} 
 

 
div.div1 { 
 
    position: relative; 
 
    border: 1px solid black; 
 
    height: 100px; 
 
    width: 100px; 
 
    padding: 10px; 
 
} 
 

 
div.div2 { 
 
    background-color: gray; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    height: calc(
 
    100% 
 
    - 20px /* div3: height */ 
 
    - 5px /* desired separation */ 
 
); 
 
} 
 

 
div.div3 { 
 
    position: absolute; 
 
    border: 1px solid red; 
 
    height: 20px; 
 
    width: 20px; 
 
    bottom: 10px; 
 
    left: 10px; 
 
}

<div class="div1"> 
 
    <div class="div2">Test 123</div> 
 
    <div class="div3">A</div> 
 
</div>

Answer 4

'フレックス' と呼ばれるこのかなり新しい、ヒップCSSプロパティがありますがフレキシボックスのアプローチを使用しますあなたは絶対にポジショニングする必要なしにそれを正確に行うので、今あなたが愛するつもりです。私は垂直なnav barを持っていて、私はo上部に1つ、下部に1つのメニューがあります。応答性の高い環境では、絶対的なポジショニングのアプローチを使用すると、コンテンツが重なり合うのを防ぐために高さを取り除くという面倒な混乱を招くことになります。フレックスはこれを防ぐ！ Yeyyyyy

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

あなたの例では、このような何かをしたい：

.div1 { 
    display: flex; 
    flex-direction: column; 
    flex-wrap: nowrap; 
    justify-content: space-around; 
} 
.div2 { 
    align-self: flex-start; 
    flex-grow:1; 
    width:100%; 
} 
.div3 { 
    align-self: flex-end; 
    width:100%; 
} 

は、今すぐあなたのdiv 3は常に一番下になります。今度は .div3が幅全体を拡張するので、div内にコンテンツとBOOMを挿入します。