如何在不使用 flexbox 的情况下使 child-div 与其父级的高度相等

Question

我正在尝试以多种不同的方式解决这个问题，但它不起作用。

我有一排 2 列。第一列包含将接收动态文本的文本。另一列的图像必须响应地调整其大小，无论文本内容的高度是多少。文本列领先于行父 div 的高度，因此，我的图像父 div 必须获得 100% 的高度。有没有不使用 flex-box 或 JS 的解决方案？在这种情况下，我试图避免使用 flexbox/JS。

This is the result at the moment:

父 div 很高，因为 Text 在同一行的图像旁边。

PS：我在图像上设置了 100 像素的高度，只是为了向您展示。我知道我不能使用固定高度。如何使包含背景图像的 div 遵循父行 div 的高度，而与它拥有的内容（文本）的数量无关？

非常感谢您！

这是我的 HTML：

<section>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-5 col-sm-push-7 no-padding">
              <div class="img-parent"></div>
            </div><!-- ./col-xs-12 -->

            <div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent">
              <h2>My Title</h2>
              <h3>My subtitle</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>

              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
            </div><!-- ./text-parent -->
          </div><!-- ./row -->
        </div><!-- ./container -->
      </section>

还有 CSS：

.text-parent{
  background-color:lightgrey;
  padding:30px;
}

.text-parent h2,
.text-parent h3{
  font-weight:600;
  text-transform:uppercase;
}
.text-parent h2{
  font-size: 45px;
}

.text-parent h3{
  max-width:560px;
  font-size:20px;
  color:#ed1c24;
  margin-bottom:40px;
}

.text-parent p{
  max-width:500px;
  font-size:12px;
  line-height:20px;
  text-align:justify;
}

.row{
  border:3px solid green;
}

.no-padding{
  padding:0;
}

.img-parent{
  height:100px; /*just to show a little part of the image*/
  background-image:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

Answer 1

希望对您有所帮助：

html

<section>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-5 col-sm-push-7 no-padding"></div>
            <!-- ./col-xs-12 -->

            <div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent">
                <h2>My Title</h2>
                <h3>My subtitle</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
            </div>
            <!-- ./text-parent --> 
        </div>
        <!-- ./row --> 
    </div>
    <!-- ./container --> 
</section>

css

.text-parent h3 {
    font-weight: 600;
    text-transform: uppercase;
}
.text-parent h2 {
    font-size: 45px;
}
.text-parent h3 {
    max-width: 560px;
    font-size: 20px;
    color: #ed1c24;
    margin-bottom: 40px;
}
.text-parent p {
    max-width: 500px;
    font-size: 12px;
    line-height: 20px;
    text-align: justify;
}
.row {
    border: 3px solid green;
    display: table;
    width: 100%;
}
.row > div {
    display: table-cell;
    float: none;
}
.no-padding {
    background-image: url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 767px) {
    .row > div {
        display: block;
    }
    .no-padding {
        padding: 25% 0;
    }
    .row {
        display: block;
        width: auto;
    }
}

Answer 2

image-size、image-position 和 image-repeat 不是有效的 CSS 属性，你的意思是 background-size、background-position 和 background-repeat。

此外，您不需要单独的引导行，只需将其设置为“文本”行的背景即可。

.text-parent{
  background-color:lightgrey;
  padding:30px;
}

.text-parent h2,
.text-parent h3{
  font-weight:600;
  text-transform:uppercase;
}
.text-parent h2{
  font-size: 45px;
}

.text-parent h3{
  max-width:560px;
  font-size:20px;
  color:#ed1c24;
  margin-bottom:40px;
}

.text-parent p{
  max-width:500px;
  font-size:12px;
  line-height:20px;
  text-align:justify;
}

.row{
  border:3px solid green;
}

.no-padding{
  padding:0;
}

.img-parent{
  background-image:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

<section>
        <div class="container">
          <div class="row">
            <div class="col-xs-12 col-sm-7 col-sm-pull-5 text-parent img-parent"><!-- ADDED img-parent class -->
              <h2>My Title</h2>
              <h3>My subtitle</h3>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, totam ducimus! Aspernatur porro, accusantium consequatur neque id praesentium ipsum consequuntur cum? Voluptates minus ad repellendus aspernatur, rem modi dolor cum.</p>

              <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error culpa facere quae pariatur nam dolorem ab est perferendis! Ipsa id aut nesciunt sit ea fugiat saepe sequi quisquam labore quae.</p>
            </div><!-- ./text-parent -->
          </div><!-- ./row -->
        </div><!-- ./container -->
      </section>

Answer 3

首先，image-size、image-position 和 image-repeat 应该是 background-size、background-position 和 background-repeat。

现在，您可以将 '.img-parent' 更改为：

.img-parent {
  height: 100%;
  background:url("https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Natural-Dog-Law-2-To-dogs%2C-energy-is-everything.jpg?itok=Z-ujUOUr") no-repeat center / cover;
}