如何設置子DIV高度相同父

Question

也許它是一個重複的問題。他人不與我的要求
匹配我有3個孩子的div（謝勝利-DIV-內單（類名））。
我必須設置此3個DIV相同父 DIV（謝勝利-DIV-內），或僅僅3分度相同的高度爲每一個最大

.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>

的高度的高度的高度

當屏幕尺寸改變

Answer 1

您可以在#parent，李用CSS Flexbox的孩子的div應該表現爲行柯：

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

並給予.secound-div-inner-single一個height: 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 /以上），你可以用網格工作或Flexbox的設計。這些方法的好處是，實現起來非常簡單，結果代碼相當簡潔，因此易於理解。

隨着Flexbox的：

#parent { 
    display: flex; 
} 

.children { 
    height: 100%; 
} 

這是好的和簡單，但如果你的設計正變得越來越複雜會得到困難。在這種情況下，你可以移動到網格...

隨着電網：

電網的優勢在於所有網格子元素都默認相同的高度。當涉及到確定它們之間的差距時，它們也給了你很大的靈活性。然而雖然第一格的孩子都會有一行的高度，因爲他們需要內孩子（在你的情況下，嵌套的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; 
} 

舊版本瀏覽器

老實說，這真的是一種痛苦。你似乎使用bootstrap或類似的框架。有一些技巧可以實現這一目標（例如enter link description here），但從我的經驗來看，這一切都相當乏味。

一般而言，您的方法可以確保所有元素（父級和所有ID嵌套子級）傳遞100％高度屬性。但它有自己的優點和缺點。你會發現很多建議來解決這個問題，但正如我所說：如果你不需要兼容性，使用不同的方法有很多優點。