python中sticky_前端经典布局：Sticky footer 布局

什么是Sticky footer布局？

前端开发中大部分网站，都会把一个页面分为头部区块、内容区块、页脚区块，这也是比较。往往底部都要求能固定在屏幕的底部，而非随着文档流排布。要实现的样式可以概括如下：如果页面内容不够长的时候，页脚区块在屏幕的底部；如果内容足够长的时候，页脚区块会被内容向下推送。可以以下图展示Sticky footer实现的效果：

在正常的文档流中，页面内容较少的时候，如果不做处理，页脚部分不是固定在视窗底部的。

使用sticky footer布局达到了预期的效果，及时内容区较少，页脚区块也是固定在底部。

实现方式

首先构建简单的布局代码：

其中content为内容区。方法介绍。

一、为内容区域添加最小高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content {

min-height: calc(100vh-footer的高度)

}

此方法需要知道footer的高度，如果高度不确定此方法不推荐。content的高度也可以用百分比来表示。

二、flex布局方式

html代码：

body {

display: flex;

flex-flow: column;

min-height: 100vh;

}

.content {

flex: 1;

}

.footer{

flex: 0;

}

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

二、负margin布局方式实现

基本构架：

html代码

// 这里是页面内容

// 这里是footer的内容

css代码：

.wrapper {

min-height: 100%;

}

.wrapper .content{

padding-bottom: 50px; /* footer区块的高度 */

}

.footer {

position: relative;

margin-top: -50px; /* 使footer区块正好处于content的padding-bottom位置 */

height: 50px;

clear: both;

}

.clearfix::after {

display: block;

content: ".";

height: 0;

clear: both;

visibility: hidden;

}

需要注意的：content元素的padding-bottom与footer元素的高度以及footer元素的margin-top值必须要保持一致。

这种负margin的布局方式，是兼容性最佳的布局方案，各大浏览器均可完美兼容，适合各种场景，但使用这种方式的前提是必须要知道footer元素的高度，且结构相对较复杂。