Bootstrap中Footer处理方法

落忆

2022 年 03 月 21 日

1471 次浏览

暂无评论

989字数

默认分类

最近没什么特别的活动，没事了就写写目前在做的新网站，同时也有一些可以记录的东西水水

可以参观一下哈：：[Hoihan.cn](https://hoihan.cn)

目前还不清楚到底要怎样做，先这样做着，等差不多确定下来了有做后端后台的计划，因为目前是Html的页面，等确定内容了，并且闲了再做后端

##### 前言

放置Footer时会出现两种情况

1. 页面内容少，无法撑开，在可视窗口最底部
2. 页面内容多，在页面最底部

##### 不同的实现方法

我一般个人偏向于css的position，感觉比较方便

当页面内容较少时，显示在页面可视窗口最底部（放置于head的style标签中）

```
footer{
            width: 100%;
            height:50px;   /* footer的高度一定要是固定值*/
            position:absolute;
            bottom:0;
            left:0;
        }
```

这时使用到了absolute标签可以使footer的内容显示在可视窗口的最底部

防止啰嗦列出一下position的三种不同方法

* fixed 固定在可视窗口最底部
* absolute 显示在可视窗口的最底部
* relative 显示在页面的最底部 （和什么都不写一样，因为内容会直接将footer挤在底部）

再者没有什么更多的变化就不再放完整代码块了

同时还有使用推拉推来设置整个网页高度

###### div.push写法

Html内容

```

CSS

```
html, body {
height: 100%;
}
 
.wrapper-add{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -50px; 50px为footer的高度+margin
}

```