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

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>