如何让子 div 匹配父级的高度？答案

【问题标题】：How can I get the child divs to match the height of the parent?如何让子 div 匹配父级的高度？
【发布时间】：2020-08-29 05:30:32
【问题描述】：

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
        <div class="border">
          <h3>About Me</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
        </div>
      </div>
      <div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-xs-12 col-md-6 block">
              <h4>Weddings</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Studio</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Nature</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Events</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

我需要帮助来实现这样的布局：

想要的布局

我无法让右侧的子 div 与父级的高度相匹配。任何帮助将不胜感激。

【问题讨论】：

我认为那是带有 -xs- 前缀的引导程序 3.x？
是的，没错。我在右侧有一排列，但我正在努力填补那个蓝色空间。我可以在某种程度上得到我想要为“块”类添加填充的东西，但它永远不会是准确的。

标签： css twitter-bootstrap-3

【解决方案1】：

为了让子元素匹配其父元素的宽度和高度，您需要从子元素中删除所有填充和边距。然后，您可以将孩子的高度和宽度设置为 100%。高度和宽度将由父元素控制。

【讨论】：

【解决方案2】：

这是您的解决方案的代码。请检查

.h-100{
  height:100%;
}
.h-50{
  height:50%;
}
.block{
  text-align:center;
  background-color:#f2f2f2;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
            <div class="border">
                <h3>About Me</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
            <div class="container-fluid h-100">
                <div class="row align-items-center h-100">
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"><h4>Weddings</h4> </div>
                    </div>
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"><h4>Studio</h4> </div>
                    </div>
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"><h4>Nature</h4> </div>
                    </div>
                    <div class="col-xs-12 col-md-6 block h-50">
                      <div class="d-flex align-items-center h-100 justify-content-center"> <h4>Events</h4> </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

【讨论】：

稍微解释一下会很有帮助。问题是什么？您的代码是如何解决的？
我添加了 bootstrap 4.5.2 CSS。并且在这个 CSS 中使用了最新的 flex 技术。根据此父行的列具有相等的高度。然后在创建高度 CSS（h-100 和 h-50）之后。 h-100 类添加到子行，h-50 类添加到子列。意味着创建 50 50 50 50 布局。但内部子内容显示在顶部。所以将 flex 类添加到该内部 div 并添加这些类（align-items-center h-100 justify-content-center）。 align-items-center -> 基于高度的垂直居中 justify-content-center -> 基于宽度的水平居中

【解决方案3】：

.container-fluid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.container-fluid .row .about-info {
  margin: 40px;
}
.container-fluid .row .about-info .border {
  border: 1px solid #0086c5;
  padding: 40px;
}
.container-fluid .row .about-info .border h3 {
  color: #0086c5;
}
.container-fluid .row .about-container .container-fluid {
  height: 100%;
  background: #0086c5;
}
.container-fluid .row .about-container .container-fluid .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: center;
  align-items: center;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
}
.container-fluid .row .about-container .container-fluid .row > div {
  color: #fff;
  text-transform: uppercase;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
.container-fluid .row .about-container .container-fluid .row > div h4 {
  align-self: center;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-child(2n)) {
  border-right: 2px solid #fff;
}
.container-fluid .row .about-container .container-fluid .row > div:not(:nth-last-child(-n + 2)) {
  border-bottom: 2px solid #fff;
}

<div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-6 about-info js-matchheight" data-wow-offset="10">
        <div class="border">
          <h3>About Me</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.</p>
        </div>
      </div>
      <div class="col-xs-12 col-md-6 about-container js-matchheight noPadding" data-wow-offset="10">
        <div class="container-fluid">
          <div class="row align-items-center">
            <div class="col-xs-12 col-md-6 block">
              <h4>Weddings</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Studio</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Nature</h4>
            </div>
            <div class="col-xs-12 col-md-6 block">
              <h4>Events</h4>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

【讨论】：

出了什么问题，你的代码是如何解决的？
我使用了 css gird 和 flexbox，