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

Question

我正在尝试以多种不同的方式解决这个问题，但都没有用。

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

This is the result at the moment:

父项 div 较高，因为同一行的图像旁边有一个文本。

PS：我把图片的高度设置为100px只是为了给你看。我知道我不能使用固定高度。如何使包含背景图像的 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

image-size、image-position 和 image-repeat 是无效的 CSS 属性，您的意思是 background-size、background-position 和 background-repeat.

此外，您不需要单独的 bootstrap 行，只需将其设置为 "text" 行的背景即可。

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

希望对您有所帮助:

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

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

How to make child-div get equal height of its parent without using flexbox

html

css

height

twitter-bootstrap-3