始终让footer在底部

灰太狼 2021-11-11 08:20 374阅读 0赞

**1.footer保持在页面底部**

**需求：**

**我们希望footer能在窗口最底端，但是由于页面内容太少，无法将内容区域撑开，从而在 footer 下面会留下一大块空白**

**第一种方法：采用 flexbox布局模型 **

（将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕）

代码：

<div id="container">
        <header>header</header>
        <section class="main">main</section>
        <footer>footer</footer>
    </div>

*{
        
        margin: 0;
        padding: 0;
    }
    html,body{
        
        height: 100%;
    }
    #container{
        
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    header{
        
        background: #999;
        flex: 0 0 auto;
    }
    .main{
        
        background: orange;
        flex: 1 0 auto;
    }
    footer{
        
        background: #333;
        flex: 0 0 auto;
    }

**第二种方法：****采用footer高度固定+绝对定位**

**（注意：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留（padding-bottom）footer的高度，保证main的内容能够全部显示出来而不被footer遮盖）**

**代码：**

<div id="container">
        <header>header</header>
        <section class="main">main</section >
        <footer>footer</footer>
    </div>

*{
        
        margin: 0;
        padding: 0;
    }
    html,body{
        
        height: 100%;
    }
    #container{
        /*保证footer是相对于container位置绝对定位*/
        position:relative;  
        width:100%;
        min-height:100%; 
        /*设置padding-bottom值大于等于footer的height值，以保证main的内容能够全部显示出来而不被footer遮盖；*/  
        padding-bottom: 100px;  
        box-sizing: border-box;
    }
    header{
        
        width: 100%;
        height: 200px;
        background: #999;
    }
    .main{
        
        width: 100%;
        height: 200px;
        background: orange;
    }
    footer{
        
        width: 100%;
        height:100px;   /* footer的高度一定要是固定值*/ 
        position:absolute;
        bottom:0px;
        left:0px;
        background: #333;
    }

** 第三种：固定在网页底部且居中**

html {
        
    height: 100%;
    }
    body {
        
    margin: 0;
    padding: 0;
    min-height: 100%;
    position: relative;
    }
    #footer{
        
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #969696;
    text-align: center;
    }

附加大佬的常用居中总结：

[https://juejin.im/post/58f818bbb123db006233ab2a\#heading-6][https_juejin.im_post_58f818bbb123db006233ab2a_heading-6]

转载于:https://www.cnblogs.com/ll15888/p/11187130.html

[https_juejin.im_post_58f818bbb123db006233ab2a_heading-6]: https://juejin.im/post/58f818bbb123db006233ab2a#heading-6