腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
精选内容/技术社群/优惠产品,
尽在小程序
立即前往
文章
问答
视频
沙龙
1
回答
使用react实现页脚,而不是停留在底部
javascript
、
html
、
css
、
reactjs
、
materialize
我只需要一种方法,使页脚粘性,并留在底部的页面,同时使用反应。 页脚不会停留在页面底部,尽管遵循materialize文档并在我的应用程序中创建了页眉、主页脚格式。 页脚显示正确,但拒绝转到底部(成为粘性页脚)。 下面是app.js的render方法: render() { return ( <React.Fragment> <Header /> <main> ... my stuff here ...
浏览 14
提问于2019-06-28
得票数 0
1
回答
react-router-dom反应粘性页脚
javascript
、
css
、
reactjs
、
flexbox
、
react-router
对于我经常遇到的问题,我需要一个非常干净和简单的解决方案,这样我也可以在其他项目中继续使用。我需要一个粘性脚注,与react-router-dom一起工作。我好像不能让它工作。我的App.js看起来像这样: <div> <Header loaded={loaded} /> <Switch> <Route path="/about" render={props => <About loaded={loaded} {...props} />} /
浏览 10
提问于2019-03-16
得票数 0
回答已采纳
1
回答
Reactjs App我可以在哪里定义我的布局?
reactjs
、
layout
我是ReactJs的新手,我不确定应该在哪里以及如何定义组件的布局。具体地说,我希望我的SideBar页眉和页脚保持粘性,并使用react-router-dom,我想在需要的时候在适当的位置挂载其余的组件(单击侧栏项目)?那么,我是应该一起渲染多个组件,还是有另一种方法可以先定义布局,然后在预定义的位置渲染组件?
浏览 2
提问于2018-10-22
得票数 0
2
回答
在页面内容底部之前停止350px的Jquery粘性页脚
jquery
、
footer
、
sticky
我如何用Jquery制作一个粘性页脚,直到内容结束前达到350px,才能粘在浏览器底部。基本上,我在内容的底部有另一个大页脚,我希望粘性页脚保持粘性,直到你滚动到350px的页脚,它将留在最后一个页脚的顶部,这样你就可以阅读内容了 基本上就像做一个粘性页脚,然后在内容底部之前的350px,停止粘性页脚,使其与页面一起滚动。 我在网上找到了这段代码,但我知道代码可以找出内容的结尾,而不是可视浏览器的结尾。它可以作为一般的粘性页脚( different...Although )工作。 $(function(){ positionFooter(); function positionFooter(
浏览 0
提问于2012-11-28
得票数 1
回答已采纳
2
回答
CSS粘性页脚实现之间的区别?
css
、
sticky-footer
我发现了两个不同的CSS粘性页脚实现: Steve Fait粘性页脚- Hatcher粘性页脚- 有人能解释一下他们每一个人是如何工作的吗? 如果还有其他已知的实现,请您发表评论或编辑这个问题。
浏览 1
提问于2011-04-21
得票数 5
回答已采纳
1
回答
为什么HTML5不强制使用“粘性”页脚标签?
html
、
standards
我目前正在摆弄“粘性”页脚,并且遇到了Q:中引用的常见链接。 虽然我很高兴这些修复存在,但我很好奇为什么在HTML5的重新设计精神中没有解决页脚问题。抛开语义问题不谈,web文档作者希望页脚具有默认行为,即“粘性页脚”:留在页面底部,除非页面内容更长。 我觉得这是一个错过的机会,以消除许多黑客,并想知道是什么考虑因素,不分配一个‘粘性’行为的页脚标签。
浏览 0
提问于2011-05-05
得票数 5
回答已采纳
1
回答
粘性页脚跳到移动屏幕上
html
、
css
、
zurb-foundation
在我的web应用程序中,我有一个用于小屏幕的粘性页脚。问题是粘性页脚根据键盘的状态上下跳。 我正在寻找它被覆盖在移动键盘。下面是用于粘性页脚的css width: 100%; position: fixed; bottom: 0; height: 85px; left: 0; right: 0; 有什么解决办法吗?
浏览 4
提问于2015-05-18
得票数 3
回答已采纳
1
回答
放在html和css底部的页脚。
wordpress
、
responsive-design
、
sticky-footer
我正在一个wordpress网站上工作。但我已经用html编写了主页。我要主页响应。主题提供响应或粘性页眉,但页脚不是粘性的。请帮助我使页脚响应以及粘性的底部。
浏览 2
提问于2014-12-02
得票数 0
回答已采纳
2
回答
如何制作流畅的粘性页脚
css
、
fluid-layout
、
sticky-footer
我正在寻找一种解决方案,有一个粘性页脚,其高度可能取决于浏览器的宽度。 流体设计中的粘性页脚并不都是微不足道的。我已经找到了实现粘性脚注的提示、讨论和解决方案。然而,所有这些都依赖于固定的和已知的页脚高度。在我的例子中,页脚的高度包含文本,行数取决于屏幕的宽度。 而不是做各种媒体查询和构建一些工作,我更喜欢一个干净的CSS解决方案,其中粘性页脚自动适应屏幕的宽度变化。 你们中有谁有最终答案吗?
浏览 0
提问于2013-06-04
得票数 5
1
回答
带有粘性页眉和粘性页脚项的RecyclerView
android
、
android-recyclerview
我正在尝试创建一个类似于以下结构的RecyclerView: 它应该是一个分段的 RecyclerView,具有粘性页眉和粘性页脚。 对于其他words...each部分(或条目),应该有一个具有可滚动内容的粘性页眉和一个粘性页脚。 有谁知道如何做到这一点吗? 提前感谢!
浏览 9
提问于2017-04-24
得票数 1
1
回答
其他div中的粘性页脚
javascript
、
css
、
footer
、
sticky-footer
我有一个给定的HTML结构,并且不能真正设法将它更改为将页脚放在包装器div上,而不是其他东西,因此“经典”粘性页脚代码不起作用。结构如下: <body> <div></div> <div> <sidebar></sidebar> <maincontent> <div></div> <div></div> <div></div&
浏览 3
提问于2014-12-14
得票数 1
1
回答
Twitter Bootstrap -动态更新Affix Data-Offset属性
javascript
、
jquery
、
twitter-bootstrap
、
sticky-footer
我正在使用“粘性页脚”技术在页面上的一个区域,其中也有一个导航栏利用词缀。问题是,数据偏移量属性需要根据粘性页脚的位置进行更新-因此它不能被硬编码。 如何获取粘性页脚所在位置的像素值,并将该值传递给data-offset属性,以便它知道何时附加自身? 任何帮助都将不胜感激!
浏览 0
提问于2012-10-26
得票数 2
回答已采纳
3
回答
具有CSS粘性页脚+ 960网格布局的重叠块
css
、
sticky-footer
、
960.gs
我下载了和代码。 粘性页脚的工作方式与预期一致-如果内容窗格为空,则页脚将停留在视口的底部,并在已满时将页脚向下推。 我在960网格系统中使用css粘性页脚代码,但当侧栏中的内容展开并到达页脚时,页脚与边栏内容的末尾重叠: 你知道我哪里出问题了吗?我该如何解决这个问题?
浏览 3
提问于2012-05-24
得票数 0
回答已采纳
4
回答
在iPad网站底部有粘性页脚吗?
css
在iPad上可以在底部使用粘性页脚吗?我正在制作一个网站,这也需要兼容的iPad和该网站,我需要使用底部粘性页脚。
浏览 0
提问于2011-05-20
得票数 3
1
回答
带有UIScrollView的粘性页脚
ios
、
uiscrollview
、
autolayout
需要使用UIScrollView实现粘性页脚行为,我实际上希望复制UITableView的节页脚视图(红色视图)的行为。(请参阅以下gif url) 我尝试使用以下约束,我们需要Bottom Container是粘性的。(它的行为必须像https://imgur.com/a/45Urz gif中的红色页脚)
浏览 0
提问于2018-02-10
得票数 1
回答已采纳
2
回答
HTML5样板中的粘性页脚
css
、
sticky-footer
、
boilerplate
、
html5boilerplate
我试图在样板中实现一个粘性页脚,但我找不到一种方法来工作。我尝试了和发布的解决方案,但这两个解决方案对我都不起作用。 我研究了一下,发现Boilerplate不支持粘性页脚。你们中的任何人在这个问题上有什么幸运的吗? 要查看我确实需要粘性页脚的页面,请转到 谢谢你的帮助。干杯
浏览 1
提问于2012-01-29
得票数 3
回答已采纳
1
回答
关于滚动函数,它适用于$(窗口),但不适用于$(文档),为什么?
javascript
、
jquery
、
html
、
css
我正在开发一个函数,一旦粘性页脚到达元素-> #line-before-related-article,就必须将其隐藏起来。当我使用$(document)时,当我开始向下滚动时,粘性页脚就消失了,这不是我想要的。 当我使用$(window)时,粘性页脚在到达#line-before-related-article之前就消失了,这几乎就是我所需要的。我希望粘性页脚仅在到达id为#line-before-related-article的div时消失。 $(window).scroll(function() { if ($(this).scrollTop() + $(this).hei
浏览 1
提问于2016-12-09
得票数 0
1
回答
当主体中有动态数据时,如何在最后一页的底部放置页脚
html
、
css
我正在尝试创建一个报告,其中有一个要求,页脚必须放置在最后一页的底部。报告体根据从数据库返回的记录数动态加载。报告可以是1页或更多。 我已经尝试使用粘性页脚,这对于查看网站上的HTML是可以的,但是当报告的长度大于1页时,当查看打印预览屏幕时,页脚与报告的正文重叠,并且页脚保留在第一页而不是移动到最后一页。 有没有人知道在创建可打印屏幕时,在最后一页的底部放置页脚的方法,该屏幕的格式正确,用户无需使用粘性页脚即可打印。 当有多个页面要打印时,我实现的粘性页脚不能在打印预览屏幕中正确显示。
浏览 0
提问于2013-02-06
得票数 6
12
回答
如何创建一个能很好地使用Bootstrap 3的粘性页脚
css
、
twitter-bootstrap
、
twitter-bootstrap-3
、
sticky-footer
无论有没有顶部导航,这是非常常见的网站有一个粘性页脚。引导程序可以轻松地创建固定的页脚,但是没有这样的工具来创建粘性的页脚--这有很大的不同。 在谷歌上搜索这个问题会发现,成百上千的开发人员都有同样的问题,但没有一个好的答案。 具有讽刺意味的是,页面本身除了引导样式之外还有一个粘性页脚和一个固定的顶部导航条。不过,这都是定制的css,而不是框架的一部分。因此,一个明显的途径是采取和重构他们的定制样式,因为它显然在Bootstrap框架内发挥良好,但这似乎比它应该更痛苦。 参见获得一个带有引导带顶部导航条的示例页面,以及一个不受欢迎的、非粘性页脚。 问题: (感谢软层-感谢) 所需解决
浏览 0
提问于2013-11-03
得票数 76
回答已采纳
1
回答
如何使用粘性页脚将bootstrap 3容器设置为浏览器高度的100%?
css
、
twitter-bootstrap-3
正如标题所说,如何使用粘性页脚将bootstrap 3容器(包装器)设置为浏览器窗口高度的100%? 更新: 粘性页脚运行良好,这是我需要100%高度的第一个'<div class="container">'
浏览 1
提问于2015-01-03
得票数 3
4
回答
asp.net中的粘性页脚不起作用
html
、
css
、
sticky-footer
我在我的页面中使用粘性页脚与表单标签,它的工作很好检查演示如下 但是当我使用<form>标签,然后粘性页脚不工作时,请检查小提琴链接
浏览 0
提问于2013-06-03
得票数 3
回答已采纳
2
回答
在包含元素上设置了高度的粘性页脚
html
、
css
我可以按照说明在网页上设置粘性页脚 这表明没有设置min-height:100%和height .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } 但是,在其中一个页面中,我需要设置height:100% in.page-wrap来调整其子页面的高度。在我设置了高度:100%后,我的粘性页脚不工作,并出现在页面的中间。 有没有办法让粘性页脚在.page-wrap中高度设置为100%时工作?
浏览 7
提问于2013-09-09
得票数 2
1
回答
CSS背景部分
css
我有一个背景,有两种颜色被切成两半。该页有粘性页脚。 有没有更好的方法可以做到这一点,同时仍然保持粘性页脚?我做了一些研究,但这都会影响粘性页脚。 * {margin:0;} html {position: relative; min-height: 100%; background:#F6E038;} body {margin: 0 0 100px;}/* bottom = footer height */ .footer{ position: absolute; left: 0; bottom: 0; height: 100px; width: 1
浏览 2
提问于2013-04-10
得票数 1
回答已采纳
2
回答
绝对位置和溢出属性
html
、
css
、
css-position
我正在制作这个页面,它有一个粘性的页脚。 内容div,正在通过粘性的页脚,由于绝对定位,我无法使overflow:hidden;正常工作。 有人能帮我吗? 请不要评论设计:P也不是我喜欢的。 |
浏览 0
提问于2012-08-06
得票数 0
回答已采纳
2
回答
粘性页脚覆盖正文内容的底部
html
、
css
、
footer
、
overlap
、
sticky
我添加了一个粘性页脚,在Safari中不能覆盖正文内容时遇到了麻烦。Chrome和FF运行得很好,我在正文中添加了一个底边距来抵消粘性页脚的高度。为什么同样的功能在Safari中不起作用? 这是有问题的页面...我不知道在这里粘贴代码的哪一部分,抱歉... http://go.datis.com/2019summit_agenda 我希望正文内容在它和粘性页脚之间留出空白处。
浏览 33
提问于2019-01-30
得票数 1
回答已采纳
4
回答
如何使滚动页脚固定,然后返回到滚动
javascript
、
jquery
、
html
、
css
大家好,我看到了所有这些粘性页脚脚本和粘性侧边栏脚本!我想要的是类似的东西,我有一个有页脚的长页,然后在页脚下面有更多的内容,我希望页面只在内容到达页脚时才显示页脚,一旦页脚在屏幕上显示,它就会固定到底部,这样我就可以继续滚动页面并查看“更多的内容”,当回滚回滚时,页脚从底部的固定页脚分离到正常状态! 我附上了一个截图,也许可以帮助更好地解释它!
浏览 9
提问于2013-08-07
得票数 1
回答已采纳
1
回答
粘性页脚,在页面的某一点停止粘着的页脚。
html
、
css
、
position
我正在尝试构建与此页面中的条件粘性页脚相同的功能: 当您向下滚动页面时,页脚一直保持在位置,直到页面上的某个点,此时它只是页面流的一部分,然后滚动到屏幕上。我需要复制这个功能,但我不知道他们是如何在页面上这样做的。 如果有什么不同的话,我将在react应用程序中构建这个功能。页脚被编码,并作为一个粘性页脚正确地发挥作用,但在某一点上没有成为页面流的一部分--目前它只是一直保持粘性。
浏览 7
提问于2022-09-08
得票数 0
回答已采纳
4
回答
一个有固定页眉的真正的粘性页脚?
html
、
css
、
footer
、
sticky-footer
首先,请阅读这个完整的问题,这样你才能完全理解我在寻找什么,谢谢! 这是一个问题,我一直试图研究了一段时间,并已困扰我退出一段时间。我能有一个固定页眉的真正的粘性页脚吗? 如何实现具有固定页眉的粘性页脚?我不能添加填充或空白处的身体或内容,因为这将打破页脚。此外,我希望能够在我的内容中使用width:100%和height: 100%,而不让它溢出并造成混乱。 以下是我的目标(请原谅我出色的Photoshop技巧): 当我在我的页脚上使用position:fixed;和bottom:0;时,这看起来很好。但要使它真正的粘性,我需要添加一些css到我的网页。(出发地:) * { m
浏览 4
提问于2014-02-05
得票数 7
回答已采纳
4
回答
如何定位页脚,使其位于页面底部?
css
有没有一种方法可以把页脚定位到页面的底部。页脚不应该是粘性的。页脚应该留在页面的底部(字面意思是在网页的底部),而不应该是粘性的页脚。 这是我现在使用的代码。有没有别的办法? html { position:relative; min-height:100%; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; background-color: red; color: white;
浏览 65
提问于2020-08-27
得票数 0
回答已采纳
1
回答
webkit粘性页脚菜单
javascript
、
html
、
webkit
、
css
、
mozilla
我想为web应用程序创建一个粘性页脚菜单(-webkit/-moz)。查看屏幕截图。iphone的蓝色区域边框,红色区域代表内容,底部的灰色区域是页脚。 屏幕1: 开始屏幕。完整的内容与粘性页脚在窗口底部,我可以通过位置:固定。 屏幕2:实际所需的行为如果页面内容向下滚动,页脚应该停留在窗口的底部。这就是我需要的。 屏幕3:当前行为与位置:已修复这是当前行为,如果我滚动页面,整个内容将向上移动,包括底部的粘性页脚。 我想要一个网络应用程序,行为类似于ipod库。修复了底部的菜单和上方的可滚动内容。有什么解决方案吗?
浏览 1
提问于2011-02-02
得票数 0
回答已采纳
1
回答
达到相同底部的柱子,没有相同的顶部
html
、
css
、
layout
、
sticky-footer
我正在处理一个设计,这是一个有点挑战。 该网站需要使用粘性页脚和完整的,等长列。我一直在欺骗其他页面的背景图像,但我有一些麻烦的网页,其中有一个标题在左栏。 标题下面有一个空白,显示背景图像,所以我下降的背景图像是不可行的。 我已经包含了粘性页脚,并在CSS中对其进行了分段,因为解决方案必须与粘性页脚一起工作。
浏览 2
提问于2012-05-17
得票数 0
回答已采纳
1
回答
单击noCAPTCHA复选框后页面宽度增加(使用引导-rtl)
css
、
twitter-bootstrap
、
recaptcha
我使用的是,我的页面包含粘性页眉和页脚(如)。 我注意到当我在小屏幕上运行页面时(宽度小于760 on )。与单击“我不是机器人”按钮相比,标题会扩展到大视图,页面宽度会意外地增长。 我注意到从html标记中移除“位置:相对”可以修复问题,但会破坏粘性页脚。不幸的是,我找不到任何其他解决方案的粘性页脚与固定的页眉很好地工作。 我上传了,复制这个问题 任何想法都将不胜感激,谢谢! 迈尔
浏览 1
提问于2015-07-26
得票数 0
回答已采纳
2
回答
消除大屏幕上覆盖图像与粘性页脚之间的白色间隔
html
、
twitter-bootstrap
、
css
这是我正在开发的页面的链接。这个网站已经建立了启动带3。 在这个链接的主页上,我有一个标题,然后是一个带有过滤器覆盖的封面图像,最后是一个页脚。我已经能够使页脚函数作为一个。然而,在较大的屏幕上,当我增加浏览器的高度时,封面图像和粘性页脚之间有一个讨厌的白色补丁。 我希望封面图像溢出(如果这是正确的术语),使用css达到粘性页脚的点,这样在中间看不到白色补丁。 我还想控制和定义浏览器的高度,在这个高度上,粘性页脚应该开始显示在页面上。 有人能帮我找出我上面分享的链接吗? 谢谢!
浏览 1
提问于2015-10-04
得票数 2
2
回答
引导容器中100%高度的内容
css
、
twitter-bootstrap
我需要帮助css,html和引导。 我怎样才能得到这样的效果: 标头=引导肚脐(50高度) 容器=所有站点和中心内容的灰色背景 左列=菜单宽度220 右栏=白色背景和100%高的内容 页脚=粘性页脚(高度:50) 为了使中心中心,我使用: <div class="container"> 但我有问题,100%的高度内容和粘性页脚。
浏览 11
提问于2013-01-29
得票数 2
1
回答
页脚并不仅停留在索引中的页面底部
html
、
css
、
twitter-bootstrap
、
footer
我有一个问题,我的页脚只粘在索引页面的底部,应用任何类型的“粘性页脚”CSS都会修复其他页面的页脚,但会破坏索引的页脚。就像在,它会浮上来。 下面是我尝试过的通用CSS: position: absolute; bottom: 0; width: 100%; 同样,它在大多数其他页面上都工作得很好,但是在索引上就不行了。 你可以在这里看到我的实时索引: 在我的一个页面上有一个非粘性页脚的例子:
浏览 0
提问于2015-10-16
得票数 0
2
回答
使用html重复背景,使用css粘性页脚将正文高度设置为100%
html
、
css
、
background-image
、
sticky-footer
问题 我使用的是一个CSS粘性页脚的实现。它确实是: html,body{ height:100%; } 我使用(想要)使用重复的背景,但是,height:100%导致了这个问题: (图片来自粘性页脚问题,但答案不令人满意) 我的理解是,图像的大小在渲染时会根据窗口的大小进行调整,因此大小永远不会超过窗口大小。 问题 是否可以继续使用我现有的CSS粘性页脚选择,并在长页面上完全呈现重复的背景图像 或 有没有另外一种支持重复背景的CSS粘性页脚? 以供参考 <div id="wrap"> <div id="header">
浏览 2
提问于2012-07-23
得票数 0
回答已采纳
1
回答
当您按下页脚部分时,使jQuery路径点不受影响
javascript
、
jquery
、
html
、
css
、
jquery-waypoints
因此,我使用jQuery路径点作为一个粘性的社交媒体导航,但是,当我点击页脚元素时,它一直在滚动。理想情况下,我希望粘性导航在它的父容器(.content)底部,当它碰到页脚时,反之,当用户回滚时,粘性导航就会再次变粘。 有谁知道实现这一目标的简单方法吗?。 var sticky = new Waypoint.Sticky({ element: $('.sticky')[0] });
浏览 4
提问于2016-06-16
得票数 7
回答已采纳
1
回答
使用jquery将内容区域设置为带有粘性页脚的页面高度
jquery
、
html
、
height
、
footer
我正在使用jquery设置一个粘性页脚,其中的内容不会在折叠下延伸。 如果我不这样做,浏览器窗口底部的页脚下就会有空格。 不幸的是,在发生这种情况的页面上,就像上面的链接一样,内容区域在容器的底部和粘性的页脚之间有一个间隙。 谁能告诉我如何设置白色内容容器的高度,以便在页面加载时使用jquery与页脚相接?
浏览 0
提问于2013-02-14
得票数 0
2
回答
使用footer.php文件创建粘性页脚
php
、
html
、
css
如何使用页脚创建粘性页脚示例当我创建一个footer.php文件并将其包含到主页时,如何使其成为粘性页脚我的搜索,创建粘性页脚的最好方法是使用file.For标签,如以下代码所示。 <div class="wrapper"> <header>header</header> <div class="main"> vfdgdgdgdf </div> <div class="push"></div> </div&
浏览 2
提问于2015-07-14
得票数 1
1
回答
动态页面上的粘性页脚- IE6问题
html
、
css
、
internet-explorer-6
、
sticky-footer
我有一个页面,它有一个粘性页脚,使用这个方法: 页面是通过Javascript动态创建的,除了IE6 (不幸的是,我必须支持这个愚蠢的浏览器),所有的浏览器都可以完美地使用我的粘性页脚。页脚移动到窗口底部并停留在那里(页面延伸到超出窗口大小的位置),因此当您滚动时,页脚保持在中心位置。 下面是我的粘性页脚的相关html代码: <div class="container"> <div class="header">...</div> <div class="navigation">...<
浏览 2
提问于2012-10-01
得票数 0
1
回答
在ionic2+bootstrap4中滚动时,粘性页脚与屏幕一起移动
javascript
、
angular
、
css
、
ionic-framework
、
bootstrap-4
我正在使用ionic2和bootstrap来制作PWA。我使用了“我的离子材料设计”主题。 我正面临着实现粘性页脚的问题。我试过用bootstrap代码,但问题是粘性页脚随着屏幕移动。我怎么才能修复它总是在屏幕的底部。任何人请帮帮忙。 .footer { position: fixed; left: 0; bottom: 0; width: 100%; background-color: red; color: white; text-align: center; } <div class=" b
浏览 25
提问于2019-03-24
得票数 1
4
回答
粘性页脚一个非常小的问题
html
、
css
以下是我的粘性页脚代码,它工作正常,但我不知道为什么我的粘性页脚没有显示在中间对齐的位置,请让我知道如何修改它来完成我的问题…或者有没有其他好的方法来制作粘性的页脚。谢谢, <table width="900" height="42" border="1" align="center" style="border-style:none; position: absolute;width: 900px;vertical-align: middle;text-align: center;z-index:999999999
浏览 2
提问于2012-05-18
得票数 0
回答已采纳
2
回答
引导5条件页脚
twitter-bootstrap
我正在寻找一种方法来做一个条件页脚,这样: 如果页面内容比视图的高度短,那么页脚就是.fixed-bottomOtherwise,--它是页面本身的一部分,当你向下滚动到它的时候,你就会到达它。 这类似于粘性顶部,虽然Bootstrap有一个粘性页脚示例,但当我尝试它时,它实际上并不会粘在底部。
浏览 8
提问于2022-01-18
得票数 0
回答已采纳
1
回答
Jasny Bootstrap在带有粘性页脚的移动屏幕上关闭画布导航
css
、
twitter-bootstrap
、
sticky-footer
、
jasny-bootstrap
我在我的响应式站点上使用了粘性页脚,以及Jasny Bootstrap off canvas nav插件(顺便说一句,这很棒)。然而,我注意到,在内容不多的页面上,当使用移动设备(sm和xs大小)时,当画布外的导航打开时,粘性页脚会跳到内容的底部。还有没有其他人经历过这种情况,或者知道解决方案?我只在sm或更小的屏幕上使用off canvas nav,所以这在桌面版的网站上不是问题。页脚在这些情况下不会保持“粘性”,而是跳到内容的底部,在下面留下一个间隙。 (尚不能上传图片)
浏览 17
提问于2014-10-17
得票数 0
1
回答
CSS Flexbox或CSS网格,用于页眉、粘性页脚和垂直对齐的中间内容?
html
、
css
、
flexbox
、
grid
我有一个要求,我们有页眉,中段和页脚。 页眉和页脚的高度可以或多或少取决于不同的屏幕大小和内容。 页脚将是粘性的,如果页面不包含滚动,则在屏幕的末尾,如果小屏幕发生滚动,则页脚不应与中间内容重叠。典型的贴纸页脚行为。 中间部分包含两列。每一列内容应该垂直中心对齐。 请参考下面的截图 注:我可以使用普通的粘性页脚和CALC调整高度的主要内容,但它不会是动态的。我不想使用javascript来完成DOMContentLoaded和窗口大小调整的所有数学运算。
浏览 1
提问于2019-02-19
得票数 1
回答已采纳
1
回答
如何在带有粘性页脚的居中3栏人工布局上收缩主要内容
html
、
css
、
sticky-footer
、
multiple-columns
我是从开始的,它提供了一个粘性页脚和一个居中的3列人工布局。两边的列是固定的宽度,主要内容应该是收缩包装以适应其内容的大小,但实际上是拉伸到max-width中为包装器定义的CSS值。主要内容是延伸的,因为CSS不包含任何会导致收缩包装的样式(即"display:inline“、"display:inline-block”、"float:left“、"display:table”、"display:inline-table“等)。最后,包装器包含除了粘性页脚之外的所有内容。 我尝试使用display:table设置包装器来收缩包装主要内容,但现在包装器d
浏览 3
提问于2012-03-27
得票数 1
回答已采纳
3
回答
粘性页脚无法正常工作
css
、
sticky-footer
我一直在关注Ryan Fait的粘性页脚,由于某种原因,我的页脚虽然粘性,但当你降低浏览器的高度时,它会在其余的div中进行裁剪。有人知道这是为什么吗,我显然遗漏了什么,我以前没有遇到过这个问题。 链接:
浏览 0
提问于2011-12-09
得票数 2
回答已采纳
1
回答
粘性页脚未按计划工作
css
、
asp.net-mvc-3
、
sticky-footer
我有一个粘性页脚,它在一个音乐网站上工作得很好,然而,当我点击带有最多专辑的流派时,它不会使页面变长,而且它们会重叠。这使得链接变得不可读,因为页脚中的图像部分在它们后面。 这是我的粘性页脚代码 html, body { height: 100%; } #wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -80px; } #footer, .push { height: 60px; }
浏览 1
提问于2011-08-23
得票数 0
回答已采纳
5
回答
在SafariMobile10.3上,粘性页脚可以从屏幕上滚动
html
、
ios
、
css
、
mobile
、
mobile-safari
我们的移动web应用程序有粘性的底部导航,就像您在iOS应用程序中经常看到的那样,在Safari10.3发布之后,只在上滚动粘性导航(页脚)就可以离开屏幕。尽管它是position: fixed和set bottom: 0,但在较早的Safari版本上也不可能。 粘性导航/页脚的样式如下: footer { position: fixed; height: 50px; left: 0; right: 0; bottom: 0; background: rgba(255, 0, 0, 0.7); } 在纵向模式下,总是可见的: 在横向模式下,您可以将其滚动到屏
浏览 2
提问于2017-05-17
得票数 33
1
回答
带有` `position: sticky;`的粘性页脚;
html
、
css
、
layout
、
sticky-footer
所以我已经用了很多粘性页脚,使用了负边距技术,弹性框,网格,甚至是表格技术。 我只是在中发现了position: sticky;,并想“耶!所有这些乱七八糟的东西终于消失了!” 见鬼,看起来我不能用position: sticky;做一个粘性的页脚,因为我想要实现的行为是相反的:当没有足够的内容向下滚动时,我希望页脚停留在屏幕底部,当内容足够多时,我希望页脚位于内容之后。 这可以通过position: sticky;实现吗
浏览 3
提问于2018-10-04
得票数 0
扫码
添加站长 进交流群
领取专属
10元无门槛券
手把手带您无忧上云
相关
资讯
CSS粘性定位是怎样工作的每日前端夜话0x1F
网页太长对用户体验的负面影响
不要在网站上无限滚动!
SMT贴片加工厂如何除掉多余的锡膏?
漫谈游戏电竞属性,DOTA2等作品为何拥有非凡的游戏生命力?
热门
标签
更多标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
活动推荐
运营活动
广告
关闭
领券