草庐IT

html - 在 CSS 中的粘性页脚上方水平和垂直居中

给定像RyanFait网站上像素高度固定的粘性页脚,是否可以在该页脚上方的空间中水平和垂直居中放置可变大小的内容? 最佳答案 我建议查看BobbyvanderSluis'sarticleonFootersatAListApart.Example#7在他的文章末尾显示了一个垂直居中的block。它确实依赖于脚本,但它确实是最小的。edit您还可以使用单单元格表格来实现垂直居中。将它与RyanFait的粘性页脚结合起来会给你这样的东西:/*OriginalStickyFooter:http://ryanfait.com/sticky-f

html - Zurb Foundation 6 视口(viewport)高度结束时的粘性开关状态 ".is-anchored .is-at-bottom"

尝试创建一个始终固定在网站顶部的菜单。遵循zurb.foundation的文档,但.sticky的行为总是出乎意料。或者也许我没有得到一些明显的信息?请在此处检查重建:http://codepen.io/mister-hansen/pen/wMgrPm如果网站向下滚动,并恰好达到初始视口(viewport)的高度,粘性插件会将元素.sticky从is-stuckis-at-top更改为:.is-anchored.is-at-bottom所以.sticky消失了。谢谢。更新文档的第一部分:foundation.zurb.com/sites/docs/sticky.html解释了所描述的行

html - 响应式 Bootstrap 粘性页脚高度

调整窗口大小时,页脚的高度会扩展,但背景颜色不会扩展。帮助!http://twitter.github.io/bootstrap/examples/sticky-footer.html 最佳答案 height:auto似乎解决了这个问题。您可以将其包含在小视口(viewport)的媒体查询中:@mediaonlyscreenand(max-device-width:480px){#footer{height:auto;}} 关于html-响应式Bootstrap粘性页脚高度,我们在Sta

javascript - 到达页面底部时,粘性导航栏会闪烁

我最近将导航栏用作粘性导航栏,在我向下滚动到某个点后粘附在页面顶部,但是,当我到达页面底部时,整个导航栏会闪烁,并且甚至有时会消失。把它想象成一台会闪烁的旧电视,您最终会敲打侧面以停止闪烁。我将如何点击我的导航栏以阻止它闪烁。Here是我的网站,让您见证闪烁的所有荣耀。这是我的导航HTML:HomeServicesContact这是我的JS:$(document).ready(function(){$('#nav-wrapper').height($("#nav").height());$('#nav').affix({offset:675});});一个重要的注意事项是,这只是在我将

html - 边框样式不适用于粘性位置元素

我不知道为什么我的边框样式不适用于position:sticky;属性。我想在我的粘性表格标题上设置边框样式。但我不想使用透明背景色。我怎样才能实现它?这是我的问题和JSFiddleLink的示例代码#wrapper{width:400px;height:200px;overflow:auto;}table{width:100%;text-align:center;border-collapse:collapse;}tabletrth,tabletrtd{border:2pxsolid;}tabletheadth{position:-webkit-sticky;position:sti

javascript - div 内的粘性元素在滚动上具有绝对位置

我有一个div,带有position:absolute和overflow:auto。在这个div中,我有一个div,它应该具有粘性并且应该固定(top:0,bottom:0,overflow:auto)我滚动。我可以修复此div,但我无法将其返回到原始位置,因为当此div已修复时我无法附加滚动事件。$('.right').scroll(function(){if($('.scroll').offset().top请查看我的JSFiddle了解更多信息-JSFIDDLE谢谢。 最佳答案 下面是我的做法。这并没有固定它的位置,但它具有相

html - css 网格元素上的粘性位置

我已经查看了此处的其他示例,但找不到可以实现此功能的示例。我希望边栏(部分)在页面滚动时保持粘性。position:sticky如果我把它放在nav上就可以工作,所以我的浏览器def支持它。main{display:grid;grid-template-columns:20%55%25%;grid-template-rows:55px1fr;}nav{background:blue;grid-row:1;grid-column:1/4;}section{background:grey;grid-column:1/2;grid-row:2;position:sticky;top:0;le

html - 如何修复 IE11 中的 Flexbox 粘性页脚

我使用flexbox创建了一个粘性页脚。它适用于除IE11之外的所有浏览器。Codepenhtml{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit;}.Page{min-height:100vh;display:flex;flex-direction:column;flex:1;}.Page-header{background:blue;}.Page-footer{background:green;}.Page-body{background:red;flex:1;}HEADERBODYFOOTER为什么它会在I

html - Bootstrap 粘性页脚重叠内容

我是Bootstrap的新手,我正在尝试将它与Symfony2一起使用。我已经有一个用于导航的主顶栏粘性。我的问题是当我尝试添加一个类似的页脚时,该页脚粘在底部,但它与我的内容重叠。我正在使用JQuery脚本来避免顶部导航栏的问题,如下所示:$(document).ready(function(){$(document.body).css('padding-top',$('#topnavbar').height());$(window).resize(function(){$(document.body).css('padding-top',$('#topnavbar').height

css - 粘性标题和内部链接

我使用css制作了一个“粘性header”,它始终显示在页面顶部,而其他内容则位于其下方。在标题中我有一些内部链接。问题是,当单击链接时,页面会滚动,因此目标位于页面顶部-被我的粘性标题隐藏-而不是就在页面下方。关于如何解决这个问题有什么建议吗?CSS:#header{position:fixed;top:0;left:0;width:100%;height:3.5em;padding:0;margin:0;}#container{width:100%;margin:3.5em000;padding:0;overflow:auto;}#content{padding:04em;marg