親divと同じように子divの境界線の高さを作成するにはどうすればよいですか？

Question

私はいくつかのパディングを持つ子divを持っています。しかし、私が子供のdivに国境を適用すると、どのように私は完全な高さでそれを得ることができますか？

<div class="parent"> 
    <div class="child"> 
    <h2>Content</h2> 
    </div> 
</div> 

.parent{ 
    border: 2px solid black; 
} 
.child{ 
    width: 25%; 
    border-right: 2px solid red; 
} 

私の現在のコードの出力：

私が実際に欲しい：ここでは、コードです

私は初心者です、それは大きな助けになります。ありがとう

Answer 1

<h1>要素のデフォルトmarginを削除して、あなたは親のdivを中心するtextを合わせると、以下のように、子のdivにheight:100%を設定することができpaddingを使用して、

.parent{ 
 
    border: 2px solid black; 
 
    height:40px; 
 
} 
 
.child{ 
 
    width: 25%; 
 
    height:100%; 
 
    border-right: 2px solid red; 
 
} 
 
h2{ 
 
    margin:0; 
 
    padding-top:8px; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <h2>Content</h2> 
 
    </div> 
 
</div>

Answer 2

親の最大の高さを継承する必要があります。

.child{ 
max-height:parent; 
} 

Answer 3

あなたの問題は、h2タグは、ブラウザからデフォルトの上部と下部の余白を取得していることである、your.childにこれを追加してみてください。あなたがそれらを維持したい場合は、

h2 { margin: 0 } 

あるいは、子供のコンテナのオーバーフローが隠さに設定より：あなたはゼロ（例えば、here）にそれらを設定することができますいずれか

.child {overflow: hidden;} 

以下の例：

.parent { 
 
    border: 2px solid black; 
 
} 
 

 
.child { 
 
    width: 25%; 
 
    overflow: hidden; 
 
    border-right: 2px solid red; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
     <h2>Content</h2> 
 
    </div> 
 
</div>

アンdにJSFiddle。