FOOTER始终在页面底部显示

发表于 更新于 阅读次数： 本文字数： 410 阅读时长 ≈ 1 分钟

不论主要内容section高度有多高，底栏footer始终保持在最下方
FOOTER

<style>
header {
    height:100px;
    background-color: green;
}
section {
    height: 500px;  // 可以任意改变
    background-color: red;
}
footer {
    height: 100px;
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background-color: green;
}
</style>
<body>
    <header>HEADER</header>
    <section>MAIN</section >
    <footer>FOOTER</footer>
</body>