css揭秘 -- Sticky footers解决方案

快来打我* 2022-05-29 05:53 169阅读 0赞

最近在读《CSS Secrets》，结合网上的许多文章写了笔记，希望大家都能有所收获

> 注：《CSS Secrets》是 Lea Verou最新著作，这本书讲解了有关于CSS中的一些小秘密，是一本所有CSSer值得一读的一本书。我自身的感受是：这确实是多年难得一见的重磅CSS书籍，看得很过瘾，CSS进阶必读！

### **问题** ###

在网页设计中，存在一个相当古老但又相当常见的问题，它是前端工程师绕不过的坎。这个问题简单地概括如下：有一个具有块级样式的页脚（比如设置了背景或阴影）,当页面足够长时它一切正常，而当页面较短时就会出现问题，页脚不能像我们期望中那样“紧贴”在视口的最底部，二是紧跟在内部的下方。问题可参照下图：

![这里写图片描述][Image 1]

### **需求** ###

> 如果页面小于一屏时，页脚块需要固定在页面底部，如果页面超过一屏时，页脚块向下推进。

> `Sticky footers`（粘粘住的页脚）形容的很贴切  
> 需求可参照下图

![需求][Image 1]

### 解决方案 ###

#### 固定高度解决方案 ####

--------------------

> 重点是利用calc()函数来设置main块的最小高度，其中100vh为屏幕可视高度。此种方案代码及其精简。不过，如果页面布局不是这么简单的话，那这个方法就**完全不实用**了。它不仅要求我们确保页脚内的文本永远不会折行，而且**每当我们改变页脚的尺寸**时，都需要跟着调整min-height值

**html:**

<div class="container">
      <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nam labore exercitationem magnam, magni laudantium facilis. Maxime quisquam modi illo nisi architecto repellat dicta veritatis, et at, error magnam</p>
      </div>
      <div class="close">x</div>
    </div>

**css:**

body, html {
    	height: 100%;
    	margin: 0;
    }
    .container {
    	width: 100%;
    	height: 100%;
    	color: #fff;
    	text-align: center;
    	background: rgba(7, 17, 27, 0.8);
    	overflow: auto;
     }
    
     .main {
     	min-height: calc(100vh - 100px);//利用calc() 表达尺寸关系
     }
    
     .close {
        font-size: 32px;
     }

#### 父级relative解决方案 ####

--------------------

> 当父级不要求使用fixed，且footer块高度已知时比较适用，主要设置container块相对定位 `position:relative;` footer块为绝对定位`position:absolute`

**html:**

<div class="container">
      <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nam labore exercitationem magnam, magni laudantium facilis. Maxime quisquam modi illo nisi architecto repellat dicta veritatis, et at, error magnam, totam!</p>
      </div>
      <div class="close">x</div>
    </div>

**css:**

body, html {
    	margin: 0;
    	height: 100%;
    }
    .container {
    	//下为关键代码
    	position: relative;
    	min-height: 100%;
     	padding: 64px 0;
     	box-sizing: border-box;
     	overflow: hidden;
    
    	color: #fff;
    	text-align: center;
    	background: rgba(7, 17, 27, 0.8);
     }
     .close {
     	position: absolute;
     	left: 45%;
     	bottom: 32px;
        font-size: 32px;
     }

#### 父级fixed解决方案 ####

--------------------

> **制作弹出层时，就需要将父级设为fixed**，此时就需要用到如下方式了

> **fixed方式的html结构层级要比relative方式复杂，需要添加main-wrapper层解决当内容小于一屏时，footer依然固定在页面底部的需求。**

> 此方式要注意设置.main\{padding-bottom: 64px;\}和 .close\{margin-top: -64px;\}

**html:**

<div class="container">
      <div class="main-wrapper">
    	  <div class="main">
    	    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse nam labore exercitationem magnam, magni laudantium facilis. Maxime quisquam modi illo nisi architecto repellat dicta veritatis, et at, error magnam, totam!</p>
    	  </div>
      </div>
      <div class="close">x</div>
    </div>
    </div>

**css:**

* {
    	margin: 0;
    	padding: 0;
    }
    .container {
    	position: fixed;
    	left: 0;
    	top: 0;
    	width: 100%;
    	height: 100%;
    	overflow: auto;
    	color: #fff;
     }
     .main-wrapper {
     	width: 100%;
     	min-height: 100%;
    	text-align: center;
    	background: rgba(7, 17, 27, 0.8);
     }
     .main {
     	padding: 64px 0;
     }
     .close {
        margin: -64px auto 0;
        font-size: 32px;
     }

\#\#\#\# 利用Flexbox实现更灵活的解决方案 ---------- >Flexbox对于此类问题同样是完美的选择。只需寥寥几句CSS代码就可以完美达成十分灵活的布局效果。而且完全不需要复杂的计算或是添加多余的HTML元素等。

**html:**

**css:**

body, html {
    	height: 100%;
    	margin: 0;
    }
    .container {
    	width: 100%;
    	color: #fff;
    	text-align: center;
    	background: rgba(7, 17, 27, 0.8);
     	overflow: auto;
    	//下为关键代码
    	display: flex;
    	min-height: 100vh;
    	flex-direction: column;
     }
     .main {
    	//会自动沿着主轴方向适配容器的剩余空间
     	flex: 1;
     }
     .close {
     	margin-bottom: 32px;
        font-size: 32px;
     }

此处简单介绍下设置Flexbox的基本思路。首先，我们需要将容器container设置 `display: flex`,因为它是这三个主要区块的父元素，当父元素获得这个属性之后，就可以对其子元素触发“伸缩盒布局模型”。然后我们将flex-direction设置为column,否则子元素会被水平排放在一行上。

之后将容器container的 `min-height` 设置为100vh，这样**它就至少会占据整个视口的高度**。不过虽然我们已经为整个容器container制定了最小高度，但各个子元素的高度仍然是以各自的内容为准的（按照CSS规范的说法，它们的高度仍然由内部因素来决定）

此时我们所期望的是，页头和页脚的高度由其**内部因素**来决定，而内容区块的高度应该可以**自动伸展并占满所有的可用空间**。我们只要给main这个容器的flex属性制定一个大于0的值（比如1即可），就可以实现这个上面的效果了。

> 这个flex属性实际上是flex-grow、flex-shrink和flex-basis的简写语法。任何元素只要设置了一个大于0的flex值，就将获得**可伸缩的特性**；flex的值负责控**制多个可伸缩元素之间的尺寸分配比例**。

> 拿上面的例子来说，如果容器main是 flex: 2,而容器close是 flex: 1，那么**main的高度就是close高度的两倍**。

参考文章：  
[Sticky footers解决方案总结][Sticky footers]  
[CSS秘密花园： Sticky footers][CSS_ Sticky footers]

[Image 1]: 
[Sticky footers]: https://segmentfault.com/a/1190000008335329
[CSS_ Sticky footers]: https://www.w3cplus.com/css3/css-secrets/sticky-footers.html