如何在內容中停止粘頁腳DIV

我一直在調整我的粘頁腳，希望在遇到#body div時停止它，但到目前爲止，我一直不成功。在大多數情況下，它通常不會涵蓋內容，但它通常是。如何在內容中停止粘頁腳DIV

如果可能的話，我想讓它堅持到窗口的底部，但唯一能夠提出的其他解決方案是固定位置。有什麼建議麼？

2013-04-28 pianoman

爲什麼不只是使用固定？ – egig 2013-04-28 04:37:21

對我來說，當我的「版權」總是貼在窗口的底部，而不是騎着我的內容的尾巴（尤其是背景圖片）時，它看起來更乾淨。 – pianoman 2013-04-28 04:58:41

好了，你可以通過多種方式申請的固定位置/粘頁腳。一種選擇是僅使用CSS，如Twitter Bootstraps Sticky Footer example。這可能是最簡單的實現。

/* The html and body elements cannot have any padding or margin. */ 
    html,body { height: 100%; } 

    /* Wrapper for page content to push down footer */ 
    #wrap { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -100px; /* Negative indent footer by it's height */ 
    } 

    /* Set the fixed height of the footer here */ 
    #push,#footer{ height:100px } 
    #footer {}

來源

2013-04-28 05:27:54 darcher

我不明白'＃push' div的用法。那裏的邏輯是什麼？ – pianoman 2013-04-28 05:44:57

閱讀埃利亞斯後。他的方法非常相似，他解釋了#push元素。它還可以防止內容與頁腳重疊。 – darcher 2013-04-28 06:12:37

@darcher這是因爲它是相同的方法，只是在原始上下文中。 twitter bootstrap的粘性頁腳使用我提供的頁腳，它只是原始的源代碼。其中一個在信貸到期時給予信貸。 – Elias 2013-05-11 01:18:26

我不知道你想要的結果，但可能是你所需要的僅僅是這樣的：

#footer { 
    position: fixed; 
    bottom: 0; 
    left:0; 
    right:0; 
}

來源

2013-04-28 05:15:17 egig

這不會阻止與我的內容發生衝突。如果窗口調整大小，我會希望腳註放在內容div的底部。 – pianoman 2013-04-28 05:25:19

根據Ryan Fait您可以使用下面的CSS文檔layout.css中：

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -4em; /*-4em represents the height of the footer */ 
} 
.footer, .push { 
    height: 4em; 
}

除了下面的HTML標記，這其實是很簡單的實現，這一切工作在主要瀏覽器。

<html> 
<head> 
    <link rel="stylesheet" href="layout.css" ... /> 
</head> 
<body> 
    <div class="wrapper"> 
     <p>Your website content here.</p> 
     <div class="push"></div> 
    </div> 
    <div class="footer"> 
     <p>Website Footer Here.</p> 
    </div> 
</body> 
</html>

我以前就實現了它和它的作品完美地用於具有頁腳要麼粘在頁面的底部，或在您內容的底部，它不需要的jQuery或JavaScript的。

爲了應對kurzweilguy的comment，推動使得它，這樣你可以在100%高度頁腳，這自然會延長頁面有一個滾動條，所以要對付它，你把陰性切緣上帶來它備份以使其適合頁面的底部。 darcher引用的頁腳使用相同的頁腳。這是一個非常好的腳註！

來源

2013-04-28 05:49:01 Elias

如何在內容中停止粘頁腳DIV

回答

相關問題