子div的高度是否决定父div的高度？

Question

我有一个父div，里面包含两个并排的子元素。第一个子元素是一张图片，必须高度为100％，宽度为58％，边距自动且溢出隐藏。第二个子元素包含文本，并且文本的长度决定了父元素的高度。这是几个页面的模板，具有不同长度的文本，因此父元素的高度也不同。是否可以在不使用JS的情况下实现我正在尝试做的事情？感谢您的帮助！以下是代码。

HTML：

<div id="product-summary">

  <div class="product-image-container">
    <img />
  </div>

  <div id="product-details">
    <h3 class="product-title"></h3>
    <div class="product-description"></div>
  </div>

</div>

CSS：

.product-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 58%;
  height: 100%;
  overflow: hidden;

  img {
    position: absolute;
    top: 0;
    left: 50%;
    margin: auto;
    transform: translateX(-50%);
    min-width: 100%;
    height: 100%;
  }
}

#product-details {
  float: right;
  border: solid thin #777;
  height: ~"calc(100% - 2px)";
  width: 41%;
  text-align: center;
}

- Thomas

---

你能提供一些代码吗？ - Andre

提供一些JSfiddle或类似的代码。 - Yuri Pereira

你可以将一张图片设置为第一个子元素的背景，这样不会影响父级div的高度。 - Banzay

@j08691 这是更少的代码，而且目前代码已经正常运行，但我正在寻求一个更好的概念性解决方案。 - Thomas

啊，我没看到你在添加代码时还加了那个标签。 - j08691

Answer 1

问题出在你的 #product-details 元素上设置了浮动，这会创建一个新的 BFM（块级格式化上下文），导致父元素崩溃。

我建议你在这里阅读更多关于 BFMs 的内容：http://yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ 有几种方法可以解决这个问题：

• 你可以清除父元素，一种方法是将 overflow: hidden; 添加到 #product-summary 元素中。
• 你可以从 #product-details 中删除 float: right，并使用 flexbox 进行对齐。

- Brian Gonzalez

---

这个人是个天才 - Dan Chill

哇，这太完美了，你的第一个建议正是我在寻找的。非常感谢！ - Thomas

Answer 2

我不懂任何预处理器的技巧，但使用inline-block效果很好，同时将positioned absolute元素包裹在一个relative父元素中以便控制。并没有提到图片的显示方式，所以我假设宽高比保持不变且不进行裁剪。

片段

.product-image-container {
  display: inline-block;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  width: 58%;
  height: 100vh;
  overflow: hidden;
}
img {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
#product-details {
  float: right;
  border: 1px solid #777;
  height: 100%;
  width: 41%;
  text-align: center;
}
a {
  margin-left: 50%;
}

<div id="product-summary">

  <div class="product-image-container">
    <img src='https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.png'>
  </div>

  <div id="product-details">
    <h3 class="product-title">Lena Söderberg</h3>
    <div class="product-description">
      <blockquote>Lenna or Lena is the name given to a standard test image widely used in the field of image processing since 1973. It is a picture of Lena Söderberg, shot by photographer Dwight Hooker, cropped from the centerfold of the November 1972 issue of Playboy
        magazine.
      </blockquote>
      <a href='https://en.wikipedia.org/wiki/Lenna'>Wikipedia</a>
    </div>
  </div>

</div>

- zer00ne