当内容出现在底部时，使页脚向上移动

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>

无礼：

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>

无礼

.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>