如何在IE上实施职位置顶

时间:2019-07-03 06:43:52

标签: html css sticky sticky-footer

这里是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,因此它的行为像粘性的,但是并没有停止向下滚动时保持其位置,但始终保持在视口底部。

0 个答案:

没有答案