1
Как установить высоту родителя (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>я установить позицию элемента в relative и установить ребенок Сво absolute и когда overflow родителя установлен в hidden высота автоматически устанавливается на 0 и содержимое просто показывается, когда overflow: visible или высота строго установлена.
Не могли бы вы попытаться перефразировать свой вопрос? Я не думаю, что ясно, чего вы пытаетесь достичь. По крайней мере мне это не так. –
Возможный дубликат [Сделать абсолютное расположение div развернуть родительскую высоту div] (http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height) –
Возможный дубликат http://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height –