固定的底部酒吧最小高度

我想了解的伎倆在https://www.google.com/。固定的底部酒吧最小高度

底部欄有position: absolute; bottom: 0;但如果你最小化窗口的高度它停留的標誌/輸入下（「堆棧」）。

當然，這是可行的東西與JS，但它是用純CSS？我的問題是有，它可以創建這個「煙囪效應」，如果又如何才能做到這一點任何CSS技巧？

我試圖理解如果<span>Google Logo</span> <div>Bottom bar</div>是卓有成效的，但我想沒有。

2013-11-27 Diolor

這樣做的一種清潔方法是設置一個底部邊緣上的主體，其是等於頁腳高度。

這裏是你的CSS：

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px; /* bottom = footer height */ 
} 
footer { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%; 
}

和HTML：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <nav></nav> 
    <article>Lorem ipsum...</article> 
    <footer></footer> 
</body> 
</html>

下面是這種方法的一個例子：http://mystrd.at/data/sticky_footer.html

來源

2013-11-27 04:53:20 sarahholden

這是因爲他們設定一個padding-bottom值等於頁腳的高度，以取代它。

.content { 
    padding-bottom: 35px; 
}

見.. padding-bottom:35px = height:35px

#footer { 
    bottom: 0; 
    font-size: 10pt; 
    height: 35px; 
    position: absolute; 
    width: 100%; 
}

來源

2013-11-27 04:35:38

是。我的問題是，雖然它有絕對/底部0，當你調整窗口大小（比如說）300px的高度時，它是不可見的。但超過485px，它開始「移動」下來。是因爲#viewport有'position：relative;'？ – Diolor

有趣的方法。謝謝。 – Diolor

固定的底部酒吧最小高度

回答

相關問題