Как подружить display: table-cell + vertical-align: middle/bottom с position: absolute?

Question

[Worddoc]

Есть нужда прикрепить внутренний блок к внешнему, который может менять свою высоту 100vh+. Если прикреплять через absolute bottom:0 , то при изменении высоты, дочерний элемент остается в нижней точке старой высоты.

Сработает vertical-align: bottom + display: table-cell. Но родительский блок имеет position: absolute и эти свойства вместе не дружат, так как position: absolute дает блоку display: block. Как их подружить или как найти верный способ?

Comments

[Сергей Горячев]

Набор слов. Даже не слов. Набор букв.
Дай картинку, что надо сделать, а то читать и понимать это жесть.

[Worddoc]

Сергей Горячев: вон в комменте кинул)

[Worddoc]

Сергей Горячев: https://codepen.io/anon/pen/xrJoqv

Answer 1

[Negwereth]

А Flex чем не угодил?

Comments

[Worddoc]

Flex также оставляет дочерний элемент в нижней точке старой высоты

[Negwereth]

Worddoc: а можно картинку?

[Worddoc]

Negwereth:

[Negwereth]

Worddoc: а дизайн? Так не очень понятно, что должно быть. Честно.

[Worddoc]

Negwereth: вот , когда высота 100% от вьюпорта


А вот когда высота 100% + overflow: scroll; Я переформулирую задачу: нужно поместить дочерний блок в самый низ overflow, т.е. по сути, это даже не высота родительского блока, а просто overflow.

[Worddoc]

Negwereth: смотри, вот я хороший пример сделал https://codepen.io/anon/pen/xrJoqv

[Сергей Горячев]

Worddoc: По-моему, ты страдаешь херней.
Тут делается все через flex, без всяких извращений, которые ты описал.
На крайний случай, height: calc(100vh - Npx), высота кнопки.
Остальное от вялотекущей шизофрении выдумано.

[Worddoc]

Сергей Горячев: флекс не помогает, мне нужно запихнуть элемент вниз overflow, а overflow не добавляет к высоте родителя. Спасибо, ты тем не менее помог - поставил верхний отступ calc(100vh - Npx))