奇怪的页脚行为
我是比较新的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
添加到其中。
有人可以帮助为什么相同的页脚类会在两页上表现不同吗?思考?
使用在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*/
}
这并没有帮助不幸的是! –
可能有任何其他问题不清楚的问题.....!你能不能让一个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;
}
如果这两个网页具有相同的类,最有可能是因为不导致行为差异的类。您是否知道可能添加到页面中的任何其他样式,这会使这两个页面有所不同? – aug
如果您向我们展示代码,css和html将会更容易 – ZombieChowder
最有可能是您的html标记存在问题 –