如何设置子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％高度属性。但它有自己的优点和缺点。你会发现很多建议来解决这个问题，但正如我所说：如果你不需要兼容性，使用不同的方法有很多优点。