奇怪的頁腳行爲

我是比較新的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

奇怪的頁腳行爲

回答

相關問題