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固定底部