Адаптивность выезжающего нижнего блока

Question

Есть картинка, которая должна быть прижата к низу и чуть выглядывать (почти вся находится спрятанной ниже документа). А при наведении выезжать снизу страницы (поверх всех элементов). У меня возникла проблема с масштабированием высоты этого блока при разных разрешениях экранов, так как прописывать ее вручную под каждую ширину слишком топорно. Можно ли это как-то грамотно сделать?

    <footer>...</footer>
    <div>
        <div id="christmas-block"></div> <!--Блок с фоновой картинкой для выезжания-->
    </div>
</body>

И css:

#christmas-block{
    position: fixed;
    height: 715px; //Приходится прописывать под каждое разрешение
    width: 100%;
    background-image: url("xxx.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: -230px;
    bottom: -615px; //Приходится прописывать под каждое разрешение
    z-index: 10000;
}

Answer 1

Попробуй заменить на ето должно сработать)

#christmas-block{
    position: absolute;
    height: 10vh;
    width: 100%;
    max-width: 100%;
    background-image: url("xxx.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: -230px;
    bottom: 0px;
    z-index: 10000;
}
#christmas-block:hover{
    height: 50vh;
}

Ага, понял, помести етот блок в ещо один блок. Полный код:

#christmas-block-inner{
    position: absolute;
    height: 10vh;
    width: 100%;
    max-width: 100%;
    background-image: url("xxx.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin-left: -230px;
    bottom: 0px;
    z-index: 10000;
}
#christmas-block-inner:hover{
    height: 50vh;
}
#christmas-block{
    position: fixed;
    bottom: 0px;
}

<footer>...</footer>
    <div id="christmas-block">
        <div id="christmas-block-inner"></div>
    </div>
</body>

Answer 2

Попробуйте выполнить код в песочнице, попробуйте открыть на весь экран.

body {
  background: #eee;
}
.promo {
  width: 75vw;
  height: 75vh;
  bottom:max(-60vh, calc(-75vh + 5rem));
  left: max(-60vw, calc(-75vw + 10rem));
  position:fixed;
  z-index:2;
  background: #00f;
  transition: all 1s ease-out;
  text-align: right;
  color: white;
  font-size: max(2.5vh, 1rem);
}

.promo:hover {
  bottom: 0;
  left:0;
}

<div class="promo">
  Я адаптирован<br>под любой экран,<br>при наведении<br>откроюсь на 75%.
</div>

БЛОГ НА HUSL

Адаптивность выезжающего нижнего блока

Ответы (2 шт):