完美解决HTML中footer保持在页面底部问题

柔情只为你懂 2022-06-16 08:40 852阅读 0赞

很多人认为页面页脚部分不就是用footer主义化标签包起来嘛，然而不然；如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况：  
![这里写图片描述][SouthEast]  
导致这一问题的原因是页面内容太少，无法将内容区域撑开，从而在 footer 下面留下一大块空白；但是我们又希望footer能在窗口最底端。今天给大家介绍两种方法来完美解决这个问题：

**方法一：footer高度固定+绝对定位**  
思路：footer的父层的最小高度是100%，footer设置成相对于父层位置绝对（absolute）置底（bottom：0），父层内要预留（padding-bottom）footer的高度。  
HTML代码：

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

CSS代码：

*{ 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; }

如果在main区域设置了浮动啥的你会发现footer固定在页面可视区的底部，且覆盖在内容上，这时候只要在footer的父元素样式上增加（overflow : hidden；）即可；

**方法二：采用 flexbox布局模型**  
思路：我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）；同时，将html 和 body 元素的高度设置为100%，使其充满整个屏幕。  
HTML代码：

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

CSS代码：  
我们需要调整各个区域占用的页面空间，我们将通过flex 属性来达到这一目的，该属性实际包含了三个属性，分别是：  
（1）flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率；  
（2）flex-shrink：如果空间不足，元素的收缩比率；  
（3）flex-basis：元素的伸缩基准值；

*{ 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; }

[SouthEast]: /images/20220616/9d4b33cbea42426eb603a40865656ff8.png