子divの高さを親と同じに設定する方法

Question

重複した質問かもしれません。他の人が私の要求に一致していません
私は3つの子div（secound-div-inner-single（クラス名））を持っています。
Iが最大のもの

.secound-div { 
 
     padding: 2rem 1rem; 
 
     margin-bottom: 1rem; 
 
     background-color: #333; 
 
     border-radius: 0.3rem; 
 
     margin-top: 1rem; 
 
     display: inline-block; 
 
     width: 100%; 
 
    } 
 
    
 
    .secound-div-letter-color { 
 
     color: #fff; 
 
    } 
 
    
 
    .secound-div-heading { 
 
     color: #e9e03b; 
 
     text-align: center; 
 
     font-family: 'Times New Roman'; 
 
    } 
 
    
 
    .labels { 
 
     color: #e9e03b; 
 
     text-align: center; 
 
     font-family: 'Times New Roman'; 
 
    } 
 
    
 
    .secound-div-heading2 { 
 
     color: #b4b00b; 
 
     text-align: center; 
 
     font-family: 'Times New Roman'; 
 
    } 
 
    
 
    .secound-div-inner { 
 
     text-align: center; 
 
     background-color: #333; 
 
     font-size: medium; 
 
     font-weight: 500; 
 
     font-family: 'Times New Roman'; 
 
     color: #e9e03b; 
 
     height: 100%; 
 
    } 
 
    
 
    .secound-div-inner-single { 
 
     background-color: #fff; 
 
     color: #b4b00b; 
 
     padding: 25px; 
 
     margin-bottom: 1rem; 
 
     
 
    }

<div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="#About" class="col-md-12"> 
 
     <div class="secound-div"> 
 
     <hr class="line" /> 
 
     <div class="secound-div-heading"> 
 
      <h1>Heading</h1> 
 
     </div> 
 
     <hr class="line" /> 
 
     <div id="parent" class="secound-div-inner"> 
 
      <div class="col-md-4"> 
 
       <div id="child" class="secound-div-inner-single"> 
 
        <div class="secound-div-heading2 "> 
 
         <h1>Heading 1</h1> 
 
         <hr class="line" /> 
 
        </div> 
 
        <p> 
 
         Div1 
 
        </p> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="secound-div-inner-single"> 
 
        <div class="secound-div-heading2"> 
 
         <h1>Heading 2</h1> 
 
         <hr class="line" /> 
 
        </div> 
 
        <p> 
 
         Div2 
 
        </p> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-4"> 
 
       <div class="secound-div-inner-single"> 
 
        <div class="secound-div-heading2"> 
 
         <h1>Heading 3</h1> 
 
         <hr class="line" /> 
 
        </div> 
 
        <p> 
 
         Div3 
 
        </p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
     </div> 
 
    <div>

の高さあたりのような親 DIV（secound-DIV-内）または同じ高さ単に3 DIVの高さと同じ、この3つのDIVの高さを設定する必要が

そして、画面サイズはあなたが、#parentにリチウムをCSSフレキシボックスを使用することができます

Answer 1

を変更したときに子divが行として振る舞う必要がありますKE：

#parent { 
    display: flex; 
    flex-wrap: wrap; /* to wrap the divs on smaller devices (mobile) */ 
} 

など.secound-div-inner-singleheight: 100%、与える：

.secound-div-inner-single { 
    height: 100%; 
} 

は以下のスニペットを見てくださいを（ 使用全ページプレビュー）：

#parent { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.secound-div { 
 
    padding: 2rem 1rem; 
 
    margin-bottom: 1rem; 
 
    background-color: #333; 
 
    border-radius: 0.3rem; 
 
    margin-top: 1rem; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
.secound-div-letter-color { 
 
    color: #fff; 
 
} 
 

 
.secound-div-heading { 
 
    color: #e9e03b; 
 
    text-align: center; 
 
    font-family: 'Times New Roman'; 
 
} 
 

 
.labels { 
 
    color: #e9e03b; 
 
    text-align: center; 
 
    font-family: 'Times New Roman'; 
 
} 
 

 
.secound-div-heading2 { 
 
    color: #b4b00b; 
 
    text-align: center; 
 
    font-family: 'Times New Roman'; 
 
} 
 

 
.secound-div-inner { 
 
    text-align: center; 
 
    background-color: #333; 
 
    font-size: medium; 
 
    font-weight: 500; 
 
    font-family: 'Times New Roman'; 
 
    color: #e9e03b; 
 
    height: 100%; 
 
} 
 

 
.secound-div-inner .col-md-4 { 
 
    flex-basis: 33.33%; 
 
    padding: 15px; 
 
} 
 

 
.secound-div-inner-single { 
 
    background-color: #fff; 
 
    color: #b4b00b; 
 
    padding: 25px; 
 
    margin-bottom: 1rem; 
 
    height: 100%; 
 
} 
 

 
.secound-div-inner .col-md-4 { 
 
    flex-basis: 33.33%; 
 
    padding: 0 15px; 
 
} 
 

 
@media screen and (max-width: 767px) { 
 
    .secound-div-inner .col-md-4 { 
 
     flex-basis: 100%; 
 
     padding: 15px; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container-fluid"> 
 
<div class="row"> 
 
    <div id="#About" class="col-md-12"> 
 
    <div class="secound-div"> 
 
    <hr class="line" /> 
 
    <div class="secound-div-heading"> 
 
     <h1>Heading</h1> 
 
    </div> 
 
    <hr class="line" /> 
 
    <div id="parent" class="secound-div-inner"> 
 
     <div class="col-md-4"> 
 
      <div id="child" class="secound-div-inner-single"> 
 
       <div class="secound-div-heading2 "> 
 
        <h1>Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1</h1> 
 
        <hr class="line" /> 
 
       </div> 
 
       <p> 
 
        Div1 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="secound-div-inner-single"> 
 
       <div class="secound-div-heading2"> 
 
        <h1>Heading 2</h1> 
 
        <hr class="line" /> 
 
       </div> 
 
       <p> 
 
        Div2 
 
       </p> 
 
      </div> 
 
     </div> 
 
     <div class="col-md-4"> 
 
      <div class="secound-div-inner-single"> 
 
       <div class="secound-div-heading2"> 
 
        <h1>Heading 3</h1> 
 
        <hr class="line" /> 
 
       </div> 
 
       <p> 
 
        Div3 
 
       </p> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
<div>

これが役に立ちます。

Answer 2

これは重複した質問です。最近のブラウザのために

あなたは古いブラウザ（特にIE10 /古い）をサポートする必要がない場合、あなたはグリッドかで動作することができます。しかし、今ではあなたは、この問題を解決するためにさまざまな方法を持っていますフレックスボックスデザイン。これらのアプローチの利点は、実装が非常に簡単であり、結果のコードがかなり簡潔で理解しやすいことです。フレキシボックスで

：

#parent { 
    display: flex; 
} 

.children { 
    height: 100%; 
} 

これがいいとシンプルですが、あなたのデザインがより複雑に成長している場合は難しいでしょう。この場合、あなたはグリッドに...グリッドに

を移動することができ：

グリッドは、すべてのグリッドの子要素は、デフォルトでは同じ高さを持っているという利点があります。彼らはまた、それらの間のギャップを定義する場合には、多くの柔軟性を提供します。しかし、FIRSTグリッドの子は行の高さを持ちますが、内部の子（あなたのケースのネストされたdivの）は、display:gridを作成したり、height:100%を与えない限り、必要なだけ多くのスペースをとります。ここでは一例です：古いブラウザ

については

#parent { 
    display:grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-tempalte-rows: 1fr; 
    grid-column-gap: 10px; 
} 

#parent > * { 
    display: grid; 
} 

正直なところ、これは本当に苦痛です。あなたは、ブートストラップまたは同様のフレームワークを使用しているようです。これを達成するためのヒント（例：enter link description here）がありますが、私の経験からはすべて面倒です。

一般的には、すべての要素（親とすべてのIDのネストされた子）が100％の高さのプロパティを渡すようにすることができます。しかしそれはそれ自身の長所と短所を伴います。あなたはこの問題に対処するアドバイスがたくさんありますが、私が言ったように、互換性が必要ない場合は、別のアプローチを使用すると多くの利点があります。