如何设置子div高度与父母相同

Question

可能是重复的问题。 其他人不符合我的要求
我有3个子div（secound-div-inner-single（类名））。
我必须将此3 div的高度设置为与父div（secound-div-inner）的高度相同，或者仅将3 div的高度设置为与最大div的高度相同

  .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应该表现为行

Answer 1

您可以在#parent上使用CSS #parent ，例如：

#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%;
}

这是很好而且很简单的方法，但是如果您的设计变得越来越复杂，就会变得困难。 在这种情况下，您可以移至网格...

带网格：

网格具有以下优点：默认情况下，所有网格子元素的高度都相同。 在定义它们之间的差距时，它们还为您提供了很大的灵活性。 但是，虽然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;
}

对于较旧的浏览器

老实说，这确实是一种痛苦。 您似乎使用了引导程序或类似的框架。 有一些技巧可以实现这一目标（例如， 在此处输入链接描述 ），但是从我的经验来看，这一切都很繁琐。

通常，您的方法是确保所有元素（父级和所有id嵌套的子级）都传递100％height属性。 但是它有其自身的优点和缺点。 您会发现很多解决此问题的建议，但正如我所说：如果您不需要兼容性，使用其他方法会有很多好处。