CSS dvw и dvh плохо взаимодействуют с заполнением? отступ-дно не отображается, даже если это учитывается? ⇐ CSS

[Anonymous]

Недавно я наткнулся на dvh, работая над побочным проектом, и хотел, чтобы элемент div-заполнителя перемещал нижний колонтитул в нижнюю часть экрана, когда на странице недостаточно контента. Эта тема кажется слишком болезненной, когда я нахожусь рядом с ней, даже если кажется, что это так. просто.
Я использую (flexbox и) дополнительную высоту и отступы сверху вниз, чтобы добавить до 100dvh, и это отлично работает, когда содержимого недостаточно для заполнения порта просмотра. Когда содержимого более чем достаточно (появляется прокрутка), до самого низа отступ-нижний не отображается, отображается отступ-верх. Я также проверил проверку Chrome и подтвердил, что действительно рассчитана сумма для нижнего и верхнего отступов.
Это ожидаемое поведение? Я пробовал читать документацию и некоторые статьи, комментирующие модули порта динамического просмотра, но не могу сказать, что обладаю глубокими знаниями CSS, чтобы рассуждать об этом.
Запустите фрагмент и нажмите/коснитесь. в окне вывода, чтобы заполнить и очистить содержимое, чтобы увидеть разницу.

Код: Выделить всё

document.body.addEventListener('click', function() {
const elem = document.getElementById("aid");
if( elem.innerHTML == "" ) {
elem.innerHTML = "Some long content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie metus ac nunc hendrerit suscipit. Aenean convallis accumsan gravida. Ut lobortis turpis ut orci efficitur, at eleifend arcu ultricies. Ut tempus eget neque efficitur auctor. Donec sagittis, augue et rhoncus vulputate, purus sem malesuada elit, id rhoncus dolor nulla placerat velit. Suspendisse purus quam, consequat quis turpis ut, tempor elementum nulla. Pellentesque nibh risus, aliquet sit amet felis placerat, lobortis vehicula nisl. Sed convallis turpis sodales ligula egestas, a ultrices libero ultrices. Sed in ipsum urna. Suspendisse aliquet mollis enim. Aliquam mollis est vitae dignissim finibus. Sed nulla tortor, ultricies eget aliquet a, consectetur at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandsse purus quam, consequat quis turpis ut, tempor elementum nulla. Pellentesque nibh risus, aliquet sit amet felis placerat, lobortis vehicula nisl. Sed convallis turpis sbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandsse purus quam, consequat quis turpis ut, tempor elementum nulla. Pellentesque nibh risus, aliquet sit amet felis placerat, lobortis vehicula nisl. Sed convallis turpis sodales ligula egestas, a ultrices libero ultrices. Sed in ipsum urna. Suspendisse aliquet mollis enim. Aliquam mollis est vitae dignissim finibus. Sed nulla tortor, ultricies eget aliquet a, consectetur at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandit nunc. Maecenas pulvinar ligula et arcu feugiat egestas. Nunc quis viverra ante. Donec purus augue, iaculis a dui ut, ullamcorper viverra massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elementum ipsum nunc, quis dictum massa convallis quis. Morbi neque risus, mattis sodales lobortis eu, iaculis a sapien. Suspendisse aliquet mollis enim. Aliquam mollis est vitae dignissim finibus. Sed nulla tortor, ultricies eget aliquet a, consectetur at enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam sodales ligula eget lacus maximus, ut suscipit augue tristique. Phasellus ac tortor dolor. Etiam ornare tempor semper. Fusce rutrum arcu a est iaculis varius. Curabitur libero augue, bibendum non leo sit amet, malesuada blandit nunc. Maecenas pulvinar ligula et arcu feugiat egestas. Nunc quis viverra ante. Donec purus augue, iaculis a dui ut, ullamcorper viverra massa. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam elementum ipsum nunc, quis dictum massa convallis quis.  Morbi neque risus, mattis sodales lobortis eu, iaculis a sapien.";
}
else {
elem.innerHTML = "";
}
}, true);

Код: Выделить всё

body {
margin: 0;
height: 96dvh;
/* here */ padding: 2dvh 0;

display: flex;
flex-direction: column;
}

.fill {
background-color: green;
flex-grow: 1;
}

.header, .footer {
background-color: red;
color: white;
padding: 1rem;
}

Код: Выделить всё

Header

Footer

Аналогично для dvw, меньше вариантов использования.

Подробнее здесь: https://stackoverflow.com/questions/782 ... shown-even