使footer固定在浏览器底部

最新推荐文章于 2023-06-30 15:13:57 发布

phoebe_huang

最新推荐文章于 2023-06-30 15:13:57 发布

阅读量2.1k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/PigBiBiX/article/details/77858964

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

只要做网页，就百分之九十九会做footer的布局。一般我们最想要的布局是，footer一直固定在网页的底部。如果网页内容不多，就把footer固定在可视区的底部。

总体布局一般是这样的：

<body >
   <div class="header">I am header</div>
   <div class="content">I am content</div>
   <div class="footer">I am footer</div>
</body>

如果content的内容不多，不足使footer撑到底部，就会出现这样的情况。

黑色边框包围的地方为浏览器可视区。可以看到footer是没有贴到可视区底部的。

只需要修改一下代码，既可以解决问题：

body{
  width: 100%;
  min-height: 100%;
  position: relative;
}
.content{
height: 300px;
padding-bottom: 50px; /*当窗口高度很小时，可以使content和footer保持一定的距离*/
}
.footer{
position: absolute;
bottom: 0;
height: 50px;
}

本文仅作为笔记记录。

phoebe_huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使footer固定在浏览器底部

只要做网页，就百分之九十九会做footer的布局。一般我们最想要的布局是，footer一直固定在网页的底部。如果网页内容不多，就把footer固定在可视区的底部。总体布局一般是这样的： I am header I am content I am footer如果content的内容不多，不足以不footer撑到底部，就会出现这样的情况。
复制链接

扫一扫

专栏目录