parent 的相对位置增长以适应 child 绝对位置高度

Question

如何将 parent（relative 位置）的高度设置为其 children 的高度？

看看 this pen 看看它的实际效果。

blockquote {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #edf0f9;
  overflow: hidden;
}
blockquote img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 2;
}
blockquote .name-block {
  padding: 0.1rem 2rem 0.1rem 0.5rem;
  background-color: #6e7480;
  font-size: 0.8rem;
  position: absolute;
  top: 2rem;
  right: 5rem;
  z-index: 1;
}
blockquote .pos-block {
  padding: 0.1rem 3rem 0.1rem 0.5rem;
  background-color: #6e7480;
  font-size: 0.8rem;
  position: absolute;
  top: 3.6rem;
  right: 4rem;
  z-index: 1;
}
blockquote .txt-block {
  background-color: #2b2d32;
  padding: 5rem 1rem 1rem 1.8rem;
  position: absolute;
  top: 1.5rem;
  right: 0;
}
blockquote .txt-block:before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 4.5rem;
  border-left: 2px solid #6e7480;
  height: calc(100% - 5rem);
}

<blockquote>
  <img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" />
  <span class="name-block">John Doe</span>
  <span class="pos-block">A mannager</span>
  <div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores
    incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate
    voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate
    vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus.
    Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea!
  </div>
</blockquote>

我将 blockquote 元素位置设置为 relative 并将其 child 设置为 absolute 并且当 overflow 的 parent 设置为 hidden blockquote 的高度自动设置为 0 并且当 overflow: visible 或严格设置高度时内容只显示。

Answer 1

您已设置最小高度或高度。

blockquote {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #edf0f9;
  overflow: hidden;
  min-height: 100px;
}

http://codepen.io/hemedani/pen/vyNXJL

Answer 2

当您定位一个元素 absolute 时，它会脱离 正常流 等 blockquote （这是您的父元素 relative 元素）将具有零高度。

现在，如果您在 blockquote 上使用 overflow: hidden，它将隐藏所有内容。

所以最好的选择是在 正常流程 上放一些东西，那就是 txt-block - 删除 absolute 定位并给出 margin-top 以获得所需的效果 - 请参阅下面的演示：

blockquote {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #edf0f9;
  overflow: hidden;
}
blockquote img {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 1rem;
  z-index: 2;
}
blockquote .name-block {
  padding: 0.1rem 2rem 0.1rem 0.5rem;
  background-color: #6e7480;
  font-size: 0.8rem;
  position: absolute;
  top: 2rem;
  right: 5rem;
  z-index: 1;
}
blockquote .pos-block {
  padding: 0.1rem 3rem 0.1rem 0.5rem;
  background-color: #6e7480;
  font-size: 0.8rem;
  position: absolute;
  top: 3.6rem;
  right: 4rem;
  z-index: 1;
}
blockquote .txt-block {
  background-color: #2b2d32;
  padding: 5rem 1rem 1rem 1.8rem;
  margin-top: 1.5rem;
}
blockquote .txt-block:before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 4.5rem;
  border-left: 1px solid #6e7480;
  height: calc(100% - 5rem);
}

<blockquote>
  <img src="http://7108-presscdn-0-78.pagely.netdna-cdn.com/wp-content/uploads/2013/09/person-to-person-business.jpg" />
  <span class="name-block">John Doe</span>
  <span class="pos-block">A mannager</span>
  <div class="txt-block">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate iste ipsam facere reprehenderit iure odio voluptatem quod voluptatibus natus officiis. Consequatur eius architecto deleniti beatae sapiente laboriosam tempora, deserunt officia asperiores
    incidunt ea accusantium debitis blanditiis nesciunt ex minus ipsam nobis unde in distinctio, vero alias magni dolorum dolore? Debitis non aspernatur quis minus laboriosam. Voluptates maxime consequatur doloremque accusantium esse aperiam, voluptate
    voluptas officiis perspiciatis, minus sed ab voluptatum nisi cumque sapiente illo culpa a magnam ducimus omnis animi cum dignissimos? Vero quaerat quisquam ipsam libero porro nulla fugit repellat, accusantium, quidem, laudantium perspiciatis cupiditate
    vel dolore aliquid sapiente rem dolorem voluptatem architecto minus facilis eos expedita alias nesciunt dolores. Eum eos architecto, eveniet illo, sit doloribus, debitis possimus non placeat quibusdam odio quidem ab dicta dolorum blanditiis accusamus.
    Perferendis veniam officiis rem, ex iusto nesciunt! Sit incidunt saepe ab velit, adipisci totam rerum nostrum fugit, architecto deserunt ea!
  </div>
</blockquote>

让我知道您对此的看法，谢谢！

parent 的相对位置增长以适应 child 绝对位置高度

parent's relative position grows to fit the child absolute position height

html

css

height

css-position

blockquote