如何让子 div 与父 div 的高度相匹配？

Question

<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 与父级的高度相匹配。任何帮助将不胜感激。

Answer 1

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

Answer 2

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

Answer 3

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

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

如何让子 div 与父 div 的高度相匹配？

How can I get the child divs to match the height of the parent?

css

twitter-bootstrap-3