iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何使用纯css实现footer一直在页面底部不随页面滚动
  • 893
分享到

如何使用纯css实现footer一直在页面底部不随页面滚动

2024-04-02 19:04:59 893人浏览 泡泡鱼
摘要

这篇文章主要介绍了如何使用纯CSS实现footer一直在页面底部不随页面滚动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css代码如下:h

这篇文章主要介绍了如何使用纯CSS实现footer一直在页面底部不随页面滚动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

css
代码如下:

html, body, #sticker {height: 100%;}
   body > #sticker {height: auto; min-height: 100%;}
   #stickerCon {padding-bottom: 40px;}
   #footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}


html

代码如下:

<div id="sticker">
   <div id="stickerCon"></div>
</div>
<div id="footer">footer</div>

感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用纯css实现footer一直在页面底部不随页面滚动”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网JavaScript频道,更多相关知识等着你来学习!

--结束END--

本文标题: 如何使用纯css实现footer一直在页面底部不随页面滚动

本文链接: https://www.lsjlt.com/news/82115.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何使用纯css实现footer一直在页面底部不随页面滚动
    这篇文章主要介绍了如何使用纯css实现footer一直在页面底部不随页面滚动,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。css代码如下:h...
    99+
    2024-04-02
  • 如何实现footer定位页面底部
    这篇文章给大家分享的是有关如何实现footer定位页面底部的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。代码:<!DOCTYPE html> <htm...
    99+
    2024-04-02
  • html怎么让footer始终位于页面的最底部不随滚动而滚动
    本篇内容介绍了“html怎么让footer始终位于页面的最底部不随滚动而滚动”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读...
    99+
    2024-04-02
  • 怎么利用CSS使footer固定在页面底部
    这篇文章主要介绍“怎么利用CSS使footer固定在页面底部”,在日常操作中,相信很多人在怎么利用CSS使footer固定在页面底部问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解...
    99+
    2024-04-02
  • CSS怎么控制DIV永远固定在页面底部不随滚动而滚动
    本篇内容主要讲解“CSS怎么控制DIV永远固定在页面底部不随滚动而滚动”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么控制DIV永远固定在页面底部不随滚...
    99+
    2024-04-02
  • css怎么将div层固定显示在页面底部不随滚动条滚动
    这篇文章主要介绍“css怎么将div层固定显示在页面底部不随滚动条滚动”,在日常操作中,相信很多人在css怎么将div层固定显示在页面底部不随滚动条滚动问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2024-04-02
  • 如何实现vue进入页面时滚动条始终在底部
    这篇文章将为大家详细讲解有关如何实现vue进入页面时滚动条始终在底部,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。具体内容如下mounted () {...
    99+
    2024-04-02
  • web开发之如何禁止弹窗中蒙层底部页面跟随滚动
    这篇文章主要介绍web开发之如何禁止弹窗中蒙层底部页面跟随滚动,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!场景概述众所周知,弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用...
    99+
    2024-04-02
  • HTML怎么实现图像不会随着页面的其他部分滚动
    这篇文章主要介绍“HTML怎么实现图像不会随着页面的其他部分滚动”,在日常操作中,相信很多人在HTML怎么实现图像不会随着页面的其他部分滚动问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2024-04-02
  • 如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果
    小编给大家分享一下如何使用纯CSS和jQuery实现在页面顶部显示的进度条效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!一、纯CSS实现代码如下:<style type...
    99+
    2024-04-02
  • vue如何实现每次渲染完页面后div的滚动条保持在最底部
    这篇文章主要介绍vue如何实现每次渲染完页面后div的滚动条保持在最底部,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!实例如下://每次页面渲染完之后滚动条在最底部 updated:...
    99+
    2024-04-02
  • 如何实现平滑滚动页面到顶部的功能
    如何实现平滑滚动页面到顶部的功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。1.使用CSS完成功能的最高境界,只用CSS就搞定。代码如下:html { &...
    99+
    2023-06-09
  • jquery如何实现页面滚动而元素位置不变
    本篇内容介绍了“jquery如何实现页面滚动而元素位置不变”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!两...
    99+
    2024-04-02
  • vue使用elementUI分页如何实现切换页面时返回页面顶部
    目录使用elementUI分页实现切换页面时返回页面顶部原理实现element-ui分页el-pagination的坑1.所有的信息都必须的动态的2.数据在data里面3.这是重中之...
    99+
    2022-11-13
    vue使用elementUI分页 elementUI切换页面 elementUI返回页面顶部
  • Android如何使用viewPager2实现UI界面翻页滚动效果
    小编给大家分享一下Android如何使用viewPager2实现UI界面翻页滚动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.先在build.gradle...
    99+
    2023-06-15
  • jQuery如何实现弹窗下底部页面禁止滑动效果
    小编给大家分享一下jQuery如何实现弹窗下底部页面禁止滑动效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在项目开发过程中,...
    99+
    2024-04-02
  • vue中如何使用vue-router切换页面时滚动条自动滚动到顶部
    小编给大家分享一下vue中如何使用vue-router切换页面时滚动条自动滚动到顶部,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2024-04-02
  • JS如何实现页面滚动到关闭时的位置与不滚动效果
    这篇文章主要讲解了“JS如何实现页面滚动到关闭时的位置与不滚动效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JS如何实现页面滚动到关闭时的位置与不滚动效果”吧!标题显而易见,要说两种情况...
    99+
    2023-06-30
  • Android如何使用viewPager2实现UI界面翻页滚动的效果
    小编给大家分享一下Android如何使用viewPager2实现UI界面翻页滚动的效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.先在build.gradl...
    99+
    2023-06-15
  • 如何使用HTML+CSS实现页面加载动画效果
    这篇“如何使用HTML+CSS实现页面加载动画效果”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“如何使用HTML+CSS实现页面加载动画效果”,给大家总结了以下内容,具有一定借鉴价值,内容详...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作