創世紀WordPress的粘滯頁腳通過CSS/jQuery

好吧，夥計們，我駕駛自己與這一個屁股。創世紀WordPress的粘滯頁腳通過CSS/jQuery

對於一個客戶端，我一直在使用Genesis & WordPress進行大量的網站。但是，在某些網站上，如果沒有粘性頁腳，主題看起來不會太棒。

The problem is that不好粘腳似乎是專門爲創世紀。這導致您在主頁上看到的內容here：

基本上，內容不夠長，所以頁腳不會停留在底部，通常的嫌疑犯等等。我嘗試編輯functions.php與CSS結合，我已經嘗試了原始的CSS修復，並且我也嘗試了一些jQuery頁腳。沒有這樣的運氣。

我現在使用的作品的修復程序是這樣的：

/* Sticky Footer Fix - It's like "Dirty Dancing" & "Footloose" Had a Baby . . . Mmmmm . . . */ 

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */ 

html, body {height: 100%;} 

#wrap {height: 100%;} 

#inner {min-height: 79%; 
    margin-bottom: 66px; /* must be same height as the footer */ 
    overflow: hidden;} 

#footer {position: relative; 
    margin-top: -66px; /* negative value of footer height */ 
    height: 66px; 
    clear:both;}

它的工作好了，但它只是不適合我的口味不夠準確。您可以查看它在做什麼，在this site

So here's my question:

什麼是做一個頁腳堅持創世紀中頁的底部時，內容不夠長的最佳方式？

我很驚訝它一直很難，所以我假設我只是失去了一些東西。當然，其他人正在這樣做，並有一個修復運行。

任何想法（CSS或jQuery）的讚賞！認真地完成這個失去睡眠。

來源

2013-05-01 LukePatrick

其實，我這整理出自己！

這不是一個完美的解決方案，因爲它使用jQuery而不是純粹的CSS。但如果你使用的是Genesis框架，並需要一個粘性的頁腳修補程序，它非常簡單。

只要下載這個我已經放在一起的插件，像平常一樣安裝它，然後激活。假設您已按照README.txt中的說明操作，所有內容都將變成肉汁！

感謝@Shelton的幫助，以及Chris Coyier撰寫的這篇文章（http://css-tricks.com/snippets/jquery/jquery-sticky-footer/）。

這裏的鏈接到實際的插件：

http://kangabloo.com/Kangabloo/Public/GenesisStickyFooter1.0.zip

快樂主題化！

來源

2013-05-20 23:23:34 LukePatrick

你可以嘗試這樣的事：

body{ 
    position:relative; 
    height:100% 
} 
footer{ 
    position:absolute; 
    top:100%; 
    margin-top:-66px; 
}

來源

2013-05-02 06:15:14 Shelton

可悲的是，這並不工作，但感謝你的意見！我相信我已經將問題分離爲兩件事情： 1。頁腳被包含在中心的#wrap元素中，這阻止了它處理這種修復。 2.我正在使用Genesis Widgetized Footer，它將創建PHP超出我的頭，只要刪除項目並將它們放在包裝外。是否有任何想法如何納入一個快速的PHP修復從整體上刪除頁腳，小部件等，然後可能使用像 http://css-tricks.com/snippets/jquery/jquery- sticky-footer/ 要完成這項工作了嗎？ – LukePatrick 2013-05-09 01:18:01

當你絕對定位某個東西時，它會將它定位在具有相對位置的最近的祖先元素上。因此，如果頁腳位於相對位置的包裝中，頁腳將停留在包裝的左上角，直到您將其放置在不同的位置。但是，如果包裝位置是靜態的，它將忽略該包裝並轉到找到的具有相對位置的下一個祖先。合理？所以包裝應該不重要。靜態是默認位置，所以不要將任何位置分配給包裝器，並且應該很好。 – Shelton 2013-05-10 05:01:37

這個偉大的工作 - 我已將此添加到自定義的CSS樣式表和 - 粘頁腳：

.site-footer { 
    position: fixed; 
    bottom: 0px !important; 
    width: 100%; 
    min-height: 100px; // change to height of your footer 
    padding-top: 20px; // change padding to desired amount 
    padding-bottom: 20px; 
    left: 0; 
    margin: 0;

}

來源

2014-07-09 01:14:19 user3766276

創世紀WordPress的粘滯頁腳通過CSS/jQuery

回答

相關問題