【转】网站Footer导航完美自动固定在底部div+css

fengrui99 发表于 2020-1-3 09:01

原文来自：https://www.frbkw.com/2207/

我们在设计网页的时候，都会遇到一个问题：我底部导航要在底部，用position: absolute;定位的话，底部导航应该就连接在了内容的最后。
如果内容够长超出屏幕效果还是比较理想的。如果内容比较短，那么footer导航直接在半中间。随后我们就想到了一点，直接用position: fixed;不就好了吗？这样直接永远固定在底部，木有错，
这样确实永远固定在了底部，只有中间内容在滑动，这也不是很理想。其实我们实际需要的效果应该是这样的：

内容少时：固定在底部内容超出时：连接在内容底部，滑动到内容结束在显示大部分都是用js去处理的，但是css也是可以的哦！

原理解释
1.分析：我们把网看成3部分，头部，内容，尾巴。分别写3个div2.设置内容高度：
首先给html一个高度为100%
* {
   padding: 0;
   margin: 0;
}
html {
   height: 100%;
}

body我们给一个最小的高度为100%和定位，footer基于body定位这样的话
即使内容短footer导航也能固定在底部，内容超出也会连接在下方

body {
   min-height: 100%;
   position: relative;
}

代码演示：
<!DOCTYPE html>
<html lang="en">
   <head>
            <meta charset="UTF-8">
            <title>1</title>
            <style>
                     * {
                           padding: 0;
                           margin: 0;
                     }
                     html {
                           height: 100%;
                     }
                     body {
                           min-height: 100%;
                           position: relative;
                     }
                     .footer {
                           height: 100px;
                           line-height: 100px;
                           background: #8f7af9;
                           width: 100%;
                           position: absolute;
                           bottom: 0;
                           left: 0;
                           color: #FFFFFF;
                           text-align: center;
                           font-size: 30px;
                           font-weight: bold;
                     }
                     .feng {
                           padding-bottom: 130px;
                     }
                     .rui {
                           height: 200px;
                           line-height: 200px;
                           background-color: #4489ca;
                           text-align: center;
                           color: #FFFFFF;
                           width: 80%;
                           margin-top: 30px;
                           margin-left: 10%;
                     }
                     .head {
                           height: 100px;
                           line-height: 100px;
                           background: #ef7373;
                           width: 100%;
                           color: #FFFFFF;
                           text-align: center;
                           font-size: 30px;
                           font-weight: bold;
                     }
            </style>
   </head>
   <body>
            <div class="head">
                     我是headder
            </div>
            <div class="feng">
                     <div class="rui">
                           我是一个内容
                     </div>
                     <div class="rui">
                           我是一个内容
                     </div>

                     
                     

            </div>
            <div class="footer">
                     我是footer
            </div>
   </body>
</html>

cj13888 发表于 2020-1-3 10:39

学习借鉴一下，谢谢分享

zxinyun 发表于 2020-1-3 10:50

最近我也在瞎折腾，学习学习...

viptech 发表于 2020-1-3 10:54

用flex布局可以完美解决

fengrui99 发表于 2020-1-3 11:21

viptech 发表于 2020-1-3 10:54
用flex布局可以完美解决

flex布局的他不是一定固定在底部，如果我首页的文章很长他不是也一直在底部显示

52pojie5 发表于 2020-1-4 00:57

用PHP语言来包含更方便

fengrui99 发表于 2020-1-4 11:53

52pojie5 发表于 2020-1-4 00:57
用PHP语言来包含更方便

{:1_937:} php 我还没有开始学，想学但是怕太难

52pojie5 发表于 2020-1-5 00:54

fengrui99 发表于 2020-1-4 11:53
php 我还没有开始学，想学但是怕太难

很简单，不用怕，HTML是第一步，你已经完成了

fengrui99 发表于 2020-1-5 11:44

52pojie5 发表于 2020-1-5 00:54
很简单，不用怕，HTML是第一步，你已经完成了

直接学7可以吗

王图思睿 发表于 2020-1-5 12:02

学习一下，感谢分享

页: [1] 2

吾爱破解 - 52pojie.cn's Archiver

【转】网站Footer导航完美自动固定在底部div+css