奇怪的页脚行为

我是比较新的CSS，所以请原谅我奇怪的失态。我将页脚定义为绝对位置，并且它停留在我的网站上所有页面的底部。奇怪的页脚行为

...>页脚在这里表现完美，即它的位置粘在屏幕的底部而不管内容如何。

...>下面的页脚行为异常，它的位置不粘在页面的底部。

我使用这两个页面上同尾类，所以我不知道什么是错在这里，下文提到的 -

.shell3-Footer { 
box-sizing: border-box; 
padding: 0.9375rem; 
border-top: 0.0625rem solid #dcdcdc; 
overflow: hidden; 
max-height:40px; 
width:100%; 
background-color:#f5f5f5; 
position:absolute; }

需要注意的是，如果我改变位置固定，那么问题只是部分解决，因为只有当我们滚动到页面底部时才需要看到页脚。此外，当使用position:fixed时，我无法查看滚动条的向下箭头 - 这不是所需的行为。

此外，有问题的页脚下方有一个空白区域，我通过将bottom:0px添加到其中。

有人可以帮助为什么相同的页脚类会在两页上表现不同吗？思考？

来源

2017-07-04 Manan Shah

如果这两个网页具有相同的类，最有可能是因为不导致行为差异的类。您是否知道可能添加到页面中的任何其他样式，这会使这两个页面有所不同？ – aug

如果您向我们展示代码，css和html将会更容易 – ZombieChowder

最有可能是您的html标记存在问题 –

使用在footer这些规则，这些可以帮助....

.shell3-Footer { 
    box-sizing: border-box; 
    padding: 0.9375rem; 
    border-top: 0.0625rem solid #dcdcdc; 
    overflow: hidden; 
    max-height:40px; 
    width:100%; 
    background-color:#f5f5f5; 
    position:absolute; 
    bottom: 0px !important; left: 0px !important; z-index: 10000 !important; /*added rule*/ 
}

来源

2017-07-04 08:20:51

这并没有帮助不幸的是！ –

可能有任何其他问题不清楚的问题.....！你能不能让一个jsfiddle ....？ –

试试这个：

body { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
} 

/* Put this class on everything that is not the footer */ 
.content { 
    flex: 1 0 auto; 
} 

.shell3-Footer { 
    flex-shrink: 0; /* new stuff */ 
    width:100%; 
    background-color:#f5f5f5; 
    box-sizing: border-box; 
    padding: 0.9375rem; 
    border-top: 0.0625rem solid #dcdcdc; 
    overflow: hidden; 
}

来源

2017-07-04 16:59:26 Ginkoid

奇怪的页脚行为

回答

相关问题