每當我打開Chrome控制檯時，頁腳就會上升

所以，我承認我不擅長CSS，這可能對我而言有些愚蠢，但我希望在我的每一頁底部都有一個粘性頁腳現場。每當我打開Chrome控制檯時，頁腳就會上升

我使用絕對這個位置是我的頁腳中的CSS

position:absolute; 
    bottom:0; 
    height:50px; 
    padding: 10px; 
    width:100%;

它的工作原理，當控制檯被關閉，但如果我打開Chrome開發人員工具，頁腳突然上升，如果它被固定到瀏覽器窗口，而不是這種情況。

我做錯了什麼？

其他人如何做粘腳？

編輯

我創建了一個簡單的codepen這個問題

http://codepen.io/anon/pen/yMLBdJ

打開開發者工具頁腳下面的例子，你會發現頁腳仍然是可見的，不應該它在開發工具背後隱藏着什麼？這是問題。提前抱歉，如果它是一個愚蠢的。

來源

2017-02-23 JonnySerra

我們需要看到你的代碼的其餘部分。給我們一個顯示當前行爲的[mcve]。 –

@MichaelCoker我用一個非常簡單的Codepen更新了這個問題，只需打開開發工具，你會發現當不應該是頁腳時它仍然可見。這就是問題所在。 – JonnySerra

由於你知道你可以嘗試頁腳的高度：

html, body { 
    height: 100%; 
} 

// wrapper around all content 
main { 
    min-height: 100%; 
} 

main::after { 
    content: ''; 
    display: block; 
    height: 70px; // height + padding 
} 

footer { 
    background: grey; 
    margin-top: -70px; 
    padding: 10px; 
    height: 50px; 
    width: 100%; 
}

有了這個頁腳是一個t的底部，除非內容超過窗口高度。如果你想頁腳固定到窗口只需添加：

position: fixed; 
bottom: 0;

CodePen：http://codepen.io/MusikAnimal/pen/OpLeEM

來源

2017-02-23 06:37:19 MusikAnimal

如果是position: absolute該元素相對於其第一個定位的（非靜態的）祖先元素進行定位。

如果你想堅持到了窗口，使用position:fixed

你可以玩它here

而且爲你粘頁腳，你應該參考這個漂亮的article

來源

2017-02-23 05:42:06

每當我打開Chrome控制檯時，頁腳就會上升

回答

相關問題