vue 页脚_如何将页脚固定在页面底部_sticky footer, Layout, templates, 会员专栏教程

本文链接：https://blog.csdn.net/weixin_39881802/article/details/111534348

本文介绍了如何在Vue.js项目中创建一个始终保持在页面底部的sticky footer。通过设置HTML结构和CSS样式，确保无论内容多少，页脚总是位于页面的底部。方法包括使用`min-height: 100%`、`position: absolute`和`bottom: 0`等CSS属性来实现。详细步骤和代码示例帮助开发者理解这一布局技巧。

摘要由CSDN通过智能技术生成

作为一个Web的前端攻城师，在制作页面效果时肯定有碰到下面这种现象：当一个HTML页面中含有较少的内容时，Web页面的“footer”部分随着飘上来，处在页面的半腰中间，给视觉效果带来极大的影响，让你的页面看上去很不好看，特别是现在宽屏越来越多，这种现象更是常见。那么如何将Web页面的“footer”部分永远固定在页面的底部呢？注意了这里所说的是页脚footer永远固定在页面的底部，而不是永远固定在显示器屏幕的底部，换句话说，就是当内容只有一点点时，Web页面显示在浏览器底部，当内容高度超过浏览器高度时，Web页面的footer部分在页面的底部，总而言之Web页面的footer部分永远在页面的底部，换句说，Footer部分永远沉底。如下图所示：

那么今天主要和大家一起学习如何将页脚固定在页面的底部？

方法一

HTML Markup

页面容容部分

其实我们可以在div#page增加所需的内容结构，如下所示：

Header Section

Left Sidebar

Main content

Right sidebar

Footer Section

真正来说，实现这页脚永远固定在页面的底部，我们只需要四个div，其中div#container是一个容器，在这个容器之中，我们包含了div#header(头部)，div#page(页面主体部分，我们可以在这个div中增加更多的div结构，如上面的代码所示)，div#footer(页脚部分)

CSS Code

html,body {

margin: 0;

padding:0;

height: 100%;

}

#container {

min-height:100%;

height: auto !important;

height: 100%; /*IE6不识别min-height*/

position: relative;

}

#header {

background: #ff0;

padding: 10px;

}

#page {

width: 960px;

margin: 0 auto;

padding-bottom: 60px;/*等于footer的高度*/

}

#footer {

position: absolute;

bottom: 0;

width: 100%;

height: 60px;/*脚部的高度*/

background: #6cf;

clear:both;

}

/*=======主体内容部分=======*/

#left {

width: 220px;

float: left;

margin-right: 20px;

background: lime;

}

#content {

background: orange;

float: left;

width: 480px;

margin-right: 20px;

}

#right{

background: green;

float: right;

width: 220px;

}

下面我们一起来看看这种方法的实现原理：

和

标签：html和body标签中必须将高度(height)设置为“100%”,这样我们就可以在容器上设置百分比高度，同时需要将html,body的margin和padding都移除，也就是html,body的margin和padding都为0；

div#container容器：div#container容器必须设置一个最小高度(min-height)为100％；这主要使他在内容很少(或没有内容)情况下，能保持100％的高度，不过在IE6是不支持min-height的，所以为了兼容IE6，我们需要对min-height做一定的兼容处理，具体可以看前面的代码，或者阅读Min-Height Fast Hack了解如何解决mi