Получение высоты верхнего и нижнего колонтитула через CSS

Question

Есть ли способ наклеить нижний колонтитул на страницу, чтобы нижняя часть основного текста была короче? Я имею в виду, что если содержание тела будет длиннее, нижний колонтитул должен отображаться в конце всего содержимого. Использование макета не допускается.

Я пытался:

.my-footer {
  min-height: 1vp -heightOfHeader - heightOfFooter;
 }

Но я бы sh получил значения динамически без JS. Только с использованием CSS. Возможно ли это?

Answer 1

Я не знаю, что вы подразумеваете под «Использование макета недопустимо», но один из способов добиться этого - использовать отображение сетки.

body, html {
  margin: 0;
}

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
}
    
.main-content {
  grid-row: 1 / 2;
}
    
footer {
  grid-row: 2 / 3;
}

<div class="main-content">Main content</div>
<footer>footer</footer>