我有底部固定的页脚和显示在底部的内容,但我想让我的页脚在加载内容时上升(并将其粘贴到内容的顶部)。我该怎么做?
对于样式我使用 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
最佳答案
看看这是否是您要找的。尝试更改 .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>
关于javascript - 当内容出现在底部时使页脚向上移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53296476/