我怎样才能使孩子的div匹配父母的身高？

问题描述

NoncopyType

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

所需的布局

我无法让孩子的div在右边匹配父母的身高。任何帮助将不胜感激。

解决方法

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

,

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

,

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

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