这里是this blog的热门职位:
https://jsfiddle.net/f29yh51n/
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa;
}
.main-content{
min-height:1000px;
}
.main-footer{position:-webkit-sticky; position:sticky; bottom:0; border-color:red;}
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-content">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
<br><br><br><br>
这意味着页脚底部有粘性,当我们到达粘性容器(父级)的末端时,元素将停止在其自然位置。
由于IE不支持粘性,因此在IE上不起作用。是否有任何技巧也可以在IE上使其正常工作?
(不是重复的,因为我已经尝试了另一个问题的建议解决方法-从3年之前开始-)我当前的解决方法是在IE上使用position:fixed,因此它的行为像粘性的,但是并没有停止向下滚动时保持其位置,但始终保持在视口底部。