如何使儿童div在不使用Flexbox的情况下获得其父母的高度

Question

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

我有2列的行。第一列的文本将接收动态文本。另一列的图像必须响应地调整其大小，无论文本含有高度是多少。文本列领导着排行榜的高度，因此，我的图像父母div必须获得100％的高度。是否有任何不使用Flex-Box或JS的解决方案？在这种情况下，我试图避免使用Flexbox/JS。

这是目前的结果：

由于同一行上图像旁边的文本，父级是高。

ps：我在图像上放置了100px的高度，只是为了向您展示。我知道我不能使用修复高度。我如何使包含背景图像的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

图像大小，图像位置和图像重复不是有效的CSS属性，您是指背景大小，背景位置和背景重复。

另外，您不需要单独的bootstrap行，只需将其设置为"文本"行的背景，它可以正常工作。

.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

首先，图像大小，图像位置和图像重复应为背景大小，背景位置和背景重复。

现在，您可以更改'.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;
}