Question

我有一个带有2个浮动div的容器。右侧div 为空，只需显示居中的背景图像。然而，正确的div没有高度（即使我将其设置为height: 100%;），这会阻止显示背景图像。

如何强制右侧div的高度等于父级容器？请记住父级的高度是动态的。

HTML：

<div class="wrapper">
  <div class="fl">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

  <!--Background image should appear below, in the empty div-->
  <div class="fl bg-img"></div>
</div>

CSS：

.wrapper {
  overflow: hidden;
}

.fl {
  float: left;
  width: 50%;
}

.bg-img {
  background: url('https://news.nationalgeographic.com/content/dam/news/photos/000/755/75552.ngsversion.1422285553360.adapt.1900.1.jpg') no-repeat center center;
  background-size: 50px 50px;
  height: 100%;
}

小提琴： https://jsfiddle.net/mL1qppsu/

Answer 1

只需在父包装容器上使用flexbox即可。如果您希望相对于包装器更改背景大小（您还可以使用cover或contain），则将背景大小设置为100％，它将根据父容器动态调整div。高度。

在这里使用contain更合适，因为它不会让您的图像被裁剪并动态更改其尺寸。

＆＃13;

.wrapper {
  overflow: hidden;
  display:flex;
}

.fl {
  width: 50%;
}

.bg-img {
  background: url('https://news.nationalgeographic.com/content/dam/news/photos/000/755/75552.ngsversion.1422285553360.adapt.1900.1.jpg') no-repeat center center;
  background-size:contain;
}

＆＃13;

<div class="wrapper">
  <div class="fl">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="fl bg-img"></div>
</div>

.

＆＃13;

Answer 2

您需要为T元素设置height，.wrapper元素是.bg-img的父元素。百分比高度始终需要父元素中的引用高度。如果您只使用百分比值作为高度，则每个最高为body和html的祖先（或高达固定高度的元素）必须设置为百分比值，通常为100％。< / p>

在你的小提琴中，这将是这样的：https://jsfiddle.net/vfaj42fh/1/

Answer 3

您可以使用 Flexbox ：

执行此操作

＆＃13;

.wrapper {
  overflow: hidden;
  display: flex; /* displays flex-items (children) inline */
}

.fl {
  /*float: left;*/
  /*width: 50%;*/
  flex: 1; /* grows and takes 50% of the parent's width */
}

.bg-img {
  background: url('https://news.nationalgeographic.com/content/dam/news/photos/000/755/75552.ngsversion.1422285553360.adapt.1900.1.jpg') no-repeat center center;
  background-size: 50px 50px; /* appears small since you've set it this way */
  /*height: 100%; not necessary / both div's have the same height by default, height is dictated by the height of the "tallest" flex-item (.f1) */
}

＆＃13;

<div class="wrapper">
  <div class="fl">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <!--Background image should appear below, in the empty div-->
  <div class="fl bg-img"></div>
</div>

＆＃13;

强迫在空的浮动div的高度与背景图象

3 个答案: