css固定footer到浏览器底部的方法

本文转载自查看原文 2018-11-19 16:50 2060 CSS+HTML

<html>
<head></head>
<body>
    <div class="page-wrapper">
        <div class="page-content">内容部分</div>
    </div>
    <footer class="footer">这里是页面底部</footer>
</body>    
</html>

//css
html, body{
　　height: 100%;
}
footer{
  height: 50px;
  line-height: 50px;
  background-color: #62f1c3;
  text-align: center;
}

1、position: fixed

//css
.page-wrapper{
　　padding-bottom: 50px;
}

.footer{
　　position: fixed;
　　width: 100%;
　　bottom: 0;

2、footer前的元素使用负margin-bottom

.page-wrapper{
    height: 100%;    
    padding-bottom: 50px;
    margin-bottom: -50px;
    overflow-y: auto;
}

3、footer元素使用负margin-top

.page-wrapper{
 height: 100%; 
 padding-bottom: 50px; overflow-y: auto; } .footer{ margin-top: -50px; }

4、使用calc()计算内容部分的高度

.page-wrapper{
    height: calc(100% - 50px);
    overflow-y: auto;
}

5、使用flex-box布局

body{
   display: flex;
    flex-direction: column;
}

.page-wrapper{
    flex: 1 1 auto;
    overflow-y: auto;
}
.footer{
   flex: 0 0 auto;
}

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 固定一个div在浏览器底部 iframe底部固定在浏览器的底部 CSS实现Footer固定底部，超过一屏自动撑开利用CSS使footer固定在页面底部 footer固定在页面底部的实现方法总结 Bootstrap4设置footer固定在底部 CSS左侧固定宽右侧自适应（兼容所有浏览器） HTML5将footer置于页面最底部的方法(CSS+JS) html+css底部自动固定底部 html css div固定底部