Сделать нижний колонтитул двигаться вверх, когда содержимое отображается внизу

Question

У меня есть нижний фиксированный нижний колонтитул и содержимое, которое также отображается внизу, но я хочу, чтобы мой нижний колонтитул увеличивался при загрузке этого содержимого (и вроде бы прикреплял его к верху содержимого).Как мне это сделать?

Для стилизации я использую SASS

<footer>
    <div className="social-icons">
        <div className="icon">
            <a href="http://fb.me">
                <i className="fab fa-facebook-f"></i>
            </a>
        </div>
        <div className="icon">
            <a href="https://twitter.com/">
                <i className="fab fa-twitter"></i>
            </a>
        </div>
        <div className="icon">
            <a href="https://www.linkedin.com/">
                <i className="fab fa-linkedin-in"></i>
            </a>
        </div>
        <div className="icon">
            <a href="https://plus.google.com/discover">
                <i className="fab fa-google-plus-g"></i>
            </a>
        </div>
    </div>
    <div class="arrow"></div>
</footer>

sass:

footer
    position: fixed
    z-index: 10
    width: 100vw
    bottom: 0
    display: flex
    justify-content: space-between
    box-sizing: border-box
    flex-wrap: nowrap
    padding: 0 6.25vw  2.6042vw 6.35vw

Содержимое, которое должно быть загружено внизу ипереместите нижний колонтитул вверх:

<div class="content"></div>

sass

.content 
    position: absolute
    bottom: 0
    z-index: 30
    height: 6.25vw
    width: 100%
    background-color: $white

Answer 1

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

body{
  width: 100vw;
  margin:0;
  padding:0;
}
.upper-body{
    display: flex;
    width: 100%;
}
.footer-content{
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 10;
    width: 100vw;
    bottom: 0;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: nowrap;
    background-color: yellow;
}
footer{
    position: relative;
    z-index: 10;
    width: 100vw;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    flex-wrap: nowrap;
    padding: 0 6.25vw  2.6042vw 6.35vw;
    background-color: yellow;
}
.content{
    display: flex;
    position: relative;
    bottom: 0;
    z-index: 2;
    height: 6.25vw;
    width: 100vw;
    background-color: gray;
}

    <div class="upper-body">
    </div>
    <div class="footer-content">
        <footer>
            <div className="social-icons">
                <div className="icon">
                    <a href="http://fb.me">
                        <i className="fab fa-facebook-f"></i>
                    </a>
                </div>
                <div className="icon">
                    <a href="https://twitter.com/">
                        <i className="fab fa-twitter"></i>
                    </a>
                </div>
                <div className="icon">
                    <a href="https://www.linkedin.com/">
                        <i className="fab fa-linkedin-in"></i>
                    </a>
                </div>
                <div className="icon">
                    <a href="https://plus.google.com/discover">
                        <i className="fab fa-google-plus-g"></i>
                    </a>
                </div>
            </div>
            <div class="arrow"></div>
        </footer>
        <div class="content">
        </div>
    </div>