页脚位于底部但不粘

2024-02-29

我试图让页脚齐平到页面底部,但不一定是粘性的 - 只需位于底部,以防用户向下滚动。

这“有效”,但页脚出现后底部似乎有一些空白,看起来有点尴尬。有谁知道CSS将页脚刷新到底部并保持在最底部而不使其粘着的最佳方法吗?

如果您希望我发布我的 html/css,请告诉我。


网络上有很多很好的例子。

这是一个据称更新的版本:http://mystrd.at/modern-clean-css-sticky-footer/ http://mystrd.at/modern-clean-css-sticky-footer/;我对此没有任何经验。

这是已经存在很长时间并且被很多人使用的经典版本:

http://www.cssstickyfooter.com/html-code.html https://web.archive.org/web/20141018105554/http://www.cssstickyfooter.com:80/(回溯机存档)

这是我自己对第二个链接稍作编辑的版本,我很幸运。

/* Sticky Footer Stuff
 */
html,body { height: 100%; }
#sticky-wrap { min-height: 100%; }
.footer {
     height: 160px;
     margin-top: -160px;
}
/* end sticky footer stuff
 */


<div class="wrapper" id="sticky-wrap">
     <div class="content-area”>
     </div>
</div>
<footer>
</footer>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

页脚位于底部但不粘 的相关文章

  • 有没有办法同步ajax调用

    这可能是一个微不足道的问题 但我想知道是否有办法以某种方式知道最后一个 ajax 调用何时完成 假设我有 3 个异步 ajax 调用 ajax type GET datatype json url
  • 如何居中对齐数据表标题

    我是数据表新手 当我制作表格标题时 它总是左对齐 如何将标题设置为居中对齐 我已阅读 datatables net manual styling classes 和 datatables net reference option colum
  • 将 Regex 对象分配给 html 输入模式

    我需要以编程方式将正则表达式对象分配给输入元素模式属性 以下是我当前的实现 var regex d 5 element attr pattern regex toString slice 1 1 有没有更好的方法来做到这一点而不需要字符串操
  • 多行有多个提交按钮,我应该为每个按钮制作一个表单吗?

    我列出了大约 20 行 每行代表一个订单 每行需要有 3 个按钮 每个按钮单击将执行不同的操作 我有 3 个操作来处 理每个按钮发布请求 我只是不确定如何为每个按钮设置 Html 表单 tr td td tr
  • 固定 Div 与静态 div 的滚动条重叠

    我无法按照我想要的方式设计布局 我有一个内容区 content 您可以在示例图像中看到的灰色 里面有一个黄色元素 这个div是position static height 100 现在我有一个 left paneldiv 也 与positi
  • 在 Dartlang 中下载大文件

    我需要使用 dartlang 从浏览器下载较大的文件 我一直在使用 data uri 来下载 但已经达到了该方法的大小限制 想知道最好的方法是什么 我研究了使用 HTML5 文件系统 API 但它已被弃用 显然在大多数浏览器中从未真正实现过
  • 如何在 CSS 中将 RadioButton 图标样式设置为无(在 Flex 3 中)?

    您可以通过在 CSS 中设置以下值来在 Flex 中设置 RadioButton 的外观 upSkin Embed overSkin Embed ownSkin Embed disabledSkin Embed selectedUpSkin
  • 悬停时从下到上填充按钮背景,从下到上填充文本颜色

    我需要创建按钮 并且在悬停时它不仅必须从下到上填充背景颜色 而且还必须从下到上更改文本颜色 我对这里的方法很满意 CSS 悬停时背景从下到上填充 https stackoverflow com questions 51562340 css
  • Webkit 是否有 CSS3 网格布局的有效实现?

    CSS 网格布局 编辑草案 2011 年 11 月 21 日 http dev w3 org csswg css3 grid align 我正在制作一个原型 该原型将在选定的设备和浏览器上向客户展示 目前我并不担心跨浏览器兼容性 IE10开
  • 从选择 onChange 调用 javascript 函数 [重复]

    这个问题在这里已经有答案了 所以我有一个简单的 HTML 选择框和一个 javascript 警报功能 我希望选择框有一个 onchange 事件来调用 javascript 警报函数 这是我到目前为止所拥有的 HTML div Type
  • 检测 Webkit/Chrome 中 HTML5 数字控件更改的事件?

    HTML5 为我们提供了一些新的输入元素 例如
  • CSS 属性选择器类以以下开头但不等于

    我想将 css 应用于以 abcd 开头的所有类 但我不想将该 css 应用于名称为 abcd dontapply 的类 我可以这样做吗 我尝试过的 a class abcd not class abcd dontapply define
  • Chrome 19 无法识别字体粗细:较轻

    我刚刚启动了一个正在开发的项目以进行一些修改 并注意到该声明font weight lighter正在通过以下方式提供服务 font face并且它不再在网站上运行 参见图片 顶部镀铬 底部 ff 自昨晚以来 我的系统 Windows 上没
  • Twitter Typeahead 上使用 Bootstrap 3 的 CSS 问题

    随着 Bootstrap 3 的发布 Typeahead 已被删除 取而代之的是 https github com twitter typeahead js https github com twitter typeahead js 我已经
  • 如何在 Rails 5 中设置资产管道以使用自定义字体?

    我必须使用自定义字体贾米尔 努里 纳斯塔莱克 http www urdujahan com urdu fonts Jameel 20Noori 20Nastaleeq zip在 Rails 5 应用程序中 我以前从未使用过 Rails 中的
  • Bootstrap 4 移动导航栏消失

    我刚刚从 Bootstrap 3 转换为 Bootstrap 4 但我的移动导航栏出现问题 使用切换按钮展开导航栏时 导航消失 我不明白为什么会发生这种情况 导航栏下方有一个大屏幕 但整个移动导航向上移动 如下面的 gif 所示 以下是导航
  • AngularJS + jQuery 移动

    是否还有其他可能性来设计AngularJS以移动友好的方式应用程序CSS 我正在计划一个移动应用程序 并希望使用 AngularJS 进行逻辑和数据绑定 但我不想自己设计所有内容CSS The AngularJSFAQ说它使用jQuery
  • 如何在html中定义条件换行符?

    我希望这根绳子断在 如果需要的话 没有地方可以写了 7 380 Ft 159 Ft term kd jjal like 7 380 000 Ft 159 125 Ft term kd jjal 如何在html中实现这一点 nbsp 产生 错
  • 我应该创建一个块还是一个元素 BEM CSS?

    Bem官网说 创建一个块如果一段代码可以被重用并且它不依赖于正在实现的其他页面组件 创建一个元素如果一段代码在没有父实体 块 的情况下无法单独使用 我有一个 关于部分 块 它的元素依赖于父级并且不能在网站中重复使用 如何根据 bem 这段代
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h

随机推荐

  • 使用带参数的访问查询导出为文本

    问候 我有一个访问查询 它使用内置参数 例如 开始日期 来提示用户在运行查询时输入日期参数 在大多数情况下 这工作得很好 但今天我尝试将查询导出到文本文件 但收到错误 参数太少 预计2 这是有道理的 因为查询 开始日期 和 停止日期 中有两
  • 避免 Django def post 在保存时重复

    您好 我在保存时遇到重复对象的问题 我怎样才能防止这种情况发生 提前致谢 models py class Candidate models Model user models OneToOneField User primary key T
  • 如果每个条件都做 Rails

    您好 我需要打印出 active 为 0 的候选者 这是我在视图中的代码 如果 active 是或否 我可以打印 但是在每个 do 循环中 我只想打印活动候选者 So how can i add the condition to my ea
  • MVC5 - 如何在 DropDownListFor Html 帮助器中设置“selectedValue”

    正如问题所说 如何在 DropDownListFor Html 帮助器中设置 selectedValue 尝试了大多数其他解决方案 但没有一个有效 这就是我提出一个新问题的原因 这些都没有帮助 Html DropDownListFor m
  • 使用Webview在iPhone中查看.doc、.docx、.rtf、.ppt文件

    我想在 iPhone 中查看 doc docx rtf ppt 文件 但我猜我这边出了问题 它不适用于上述格式 但我的代码对于 txt 和 pdf 文件工作正常 我已阅读有关 Webview 的文档 它指出它支持查看上述文档 下面是我的 d
  • 在 R 中执行行之间的计算

    我试图弄清楚如何跨行 或行之间 进行计算 我尝试过查找此内容 但显然我的 Google Fu 今天并不强大 因为我只是找不到正确的搜索词 这是我要处理的数据类型的超级简化示例 mydf lt data frame pair rep 1 2
  • Linkedin API 用户分享统计

    也许我错过了有关 LinkedIn API 端点的一些信息 但在我看来 Linkedin API 没有端点 URL个人资料 墙 发布的帖子统计 喜欢 评论 甚至有机搜索统计数据 展示次数 点击次数 参与度 这很奇怪 因为公司 API 对于其
  • 连接被拒绝! selenium 服务器是否在边缘启动了 nightwatch

    我已经创建了一个项目 它是一个 vue js 应用程序 有一小部分单元测试 玩笑 和一个端到端测试 夜更 当我尝试使用 npm 运行端到端测试时 我得到 Error retrieving a new session from the sel
  • 在Delphi中使用接口有哪些优点和缺点?

    我已经使用 Delphi 类有一段时间了 但从未真正开始使用接口 我已经读过一些关于它们的内容 但想了解更多 我想听听您在使用 Delphi 中的接口时遇到的优点和缺点 包括编码 性能 可维护性 代码清晰度 层分离以及一般而言您能想到的任何
  • 浏览器兼容自动换行和空格:pre?

    我需要保留并换行 div 中的文本 到目前为止 我很难找到解决方案 我找到的最佳解决方案并不适用于所有浏览器 以下内容适用于 Chrome 和 IE6 但在 Firefox 中文本不换行 white space pre word wrap
  • Spring可缓存异步更新,同时返回旧缓存

    有休息控制器 它调用 Cacheable方法来自 Service My CacheManager has expireAfterWrite超时 所以超时后使用rest gt service方法时 必须重写缓存 但问题是 如果同时有许多剩余调
  • 从列表框中选定的项目中提取内容 (urwid)

    我正在 urwid 中创建一个列表框 其中每个项目都是从 URL 列表中提取的 URL 当选择一个项目并单击 ENTER 时 我想提取 URL 并在浏览器中打开它 到目前为止 这是我的代码 class SelectableText urwi
  • 通过 ServiceStack 加密消息

    给定一个应用程序需要交换 ConsumerKey ConsumerSecret 等信息以获取 oAuth server running WebApi over ServiceStack consumer is a desktop app 希
  • python 中的一行 ftp 服务器

    python 中是否可以使用一行命令来创建一个简单的 ftp 服务器 我希望能够以快速 临时的方式将文件传输到 Linux 机器 而无需安装 ftp 服务器 最好是使用内置 python 库的方法 这样就不需要安装任何额外的东西 强制性的T
  • Windows 应用商店应用程序使用自签名 SSL 证书连接到 HTTPS

    我有一个 Windows 应用商店应用程序 Metro 应用程序 我想连接我通过 HTTPS 构建的 Web 服务 我正在为我的网络服务使用自签名证书 但是当我尝试通过 System Net HttpClient PostAsync 从我的
  • 多处理的好例子实现?

    我正在尝试将我的程序之一转换为使用多处理 最好是多处理池 因为这些似乎更容易做到 概括地说 该过程是根据图像创建补丁数组 然后将它们传递到 GPU 进行对象检测 CPU和GPU部分各耗时约4秒 但CPU有8核 不需要等待GPU 因为数据经过
  • 仅冻结 html 表格的顶行(固定表格标题滚动)

    我想制作一个顶行冻结的 html 表格 这样当你垂直向下滚动时你总是可以看到它 有没有一种聪明的方法可以在不使用 JavaScript 的情况下实现这一点 请注意 我不需要冻结左列 我知道这有几个答案 但这些都没有真正帮助我 我发现本文 h
  • 如何使用 JavaPOS 通过 Epson 打印机打印收据?

    如何开发 Java 软件来使用 Epson 收据打印机打印收据 从 Epson 网站获取 Epson JavaPOS ADK 您需要注册才能下载 确保您安装了 32 位 JVM Install the Epson JavaPOS ADK 选
  • 在Java中反转大量文本文件

    反转异步上传到 servlet 的大型文本文件 以可扩展且高效的方式反转该文件 的最佳方法是什么 文本文件可能很大 千兆字节长 可以假设多个服务器 集群环境以分布式方式执行此操作 鼓励开源图书馆考虑 我正在考虑使用 Java NIO 将文件
  • 页脚位于底部但不粘

    我试图让页脚齐平到页面底部 但不一定是粘性的 只需位于底部 以防用户向下滚动 这 有效 但页脚出现后底部似乎有一些空白 看起来有点尴尬 有谁知道CSS将页脚刷新到底部并保持在最底部而不使其粘着的最佳方法吗 如果您希望我发布我的 html c