css единственное решение для скрытия элемента, когда содержимое страницы меньше или равно 110vh или эквивалентное решение

Question

Я реализовал кнопку css только вверх, но на более коротких страницах она показывает, когда она не нужна.

      .top {
  position: sticky;
  bottom: 9px;
  padding: 9px;
  place-self: end;
  margin-top: 109vh;

  font-weight:700;
  border-radius: 9px;
  color: var(--a1);
  background: var(--c2);
}
.top:hover {
  color: var(--c2);
  background: var(--a1);
  text-decoration: none;
}

Вы можете увидеть его в нижнем левом углу здесь: https://abridge.netlify.app/overview-abridge/ (не нужно его видеть, когда страница такая короткая)

Он отлично работает, пока его страница длиннее: https://abridge.netlify.app/overview-code-blocks/

Я думал об искусственном увеличении размера коротких страниц, но это кажется довольно хакерским, также я знаю, что могу легко решить эту проблему с помощью javascript, но я пытаюсь найти решение, которое не полагается на javascript. Я пробовал играть с медиа-запросами, но не смог найти ни одного, который действительно запрашивал бы, сколько контента находится в области просмотра.

Если вы знакомы с zola, репозиторий находится здесь: https://github.com/Jieiku/abridge.

Если у вас установлен zola, вы можете клонировать репозиторий и запустить zola serve из каталога, чтобы протестировать изменения локально.

Вот файл с обратной стороной вверх: https://github.com/Jieiku/abridge/blob/master/sass/include/_top.scss

РЕДАКТИРОВАТЬ: на данный момент я нашел творческий способ решить эту проблему, потому что это SSG, а zola имеет значение времени чтения. Я сделал это:

      {%- block gotop %}

{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<a href="#" class="top">&cuwed;</a>
{%- endif %}
{%- endif %}

{%- endblock gotop %}

Единственное, что нужно решить сейчас, это как-то переместить его на правую сторону страницы, а не на левую.

Answer 1

Это решение, которое я использовал:

      .topout {
  position: sticky;
  bottom: 1px;
  padding: 20px;
  place-self: end;
  margin-top: 110vh;
  pointer-events: none;
}
.topleft {
  margin-left: calc(100% - 80px);
}
.top {
  pointer-events: all;
  padding: 9px;
  border-radius: 9px;
  font-weight:700;
  color: #FF9900;
  background: #222222;
}
.top:hover {
  text-decoration: none;
  color: #222222;
  background: #FF9900;
}

Затем на странице шаблона Zola:

      {%- block gotop %}

{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<span class="topout">
<span class="topleft"> </span><a href="#" class="top">&cuwed;</a>
</span>
{%- endif %}
{%- endif %}

{%- endblock gotop %}

Вы можете увидеть это здесь: https://abridge.netlify.app/overview-code-blocks/

Я бы хотел избежать использования calc(), однако это работает без проблем в: Firefox, Chrome, Android Chrome.