Question

如何将父级（relative位置）的高度设置为其子级的高度？

请查看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并将其子项设置为absolute，并将父项的overflow设置为hidden blockquote的高度自动设置为0，内容仅在overflow: visible或高度严格设置时显示。

Answer 1

当您定位元素absolute时，它会从正常流中删除，因此blockquote（您的父relative元素）会有零高度。

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

所以最好的选择是在正常流上添加一些内容，这将是txt-block - 删除absolute定位并提供margin-top来获取期望的效果 - 见下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

让我知道你对此的想法，谢谢！

Answer 2

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

IDb | year | IDa | field3 |
----+------+-----+---------
1   | 2015 | 1   | ddd    |
2   | 2015 | 1   | eee    |
3   | 2015 | 2   | fff    |
4   | 2015 | 3   | ggg    |
5   | 2015 | 3   | hhh    |
6   | 2015 | 3   | iii    |
7   | 2016 | 4   | ddd    |
8   | 2016 | 4   | eee    |
9   | 2016 | 5   | fff    |
10  | 2016 | 6   | ggg    |
11  | 2016 | 6   | hhh    |
12  | 2016 | 6   | iii    |
---------------------------

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

父母的相对位置增长以适应孩子的绝对位置高度

2 个答案: