引導佈局 - 粘貼頁腳和內容行到底部

我正在設計本網站：http://ecostructionny.com。我只是在佈置主頁時，我有點卡住了。我想要在底部列出聯繫信息的頁腳行，然後在它的正上方是一行三行的信息。背景圖片是該頁面的主要視覺特徵，所以我試圖留出空間讓他們展示。引導佈局 - 粘貼頁腳和內容行到底部

任何人都可以提供一些建議嗎？如果有更好的方法來佈置它，我會喜歡一些其他的建議。

謝謝！

來源

2013-06-30 Tony Tambe

有一個在

http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/

演示頁面的好頁腳教程這裏：

http://www.lwis.net/profile/CSS/sticky-footer.html

的基本前提是，主體頁面被拉伸至100％的頁面。最小的高度也是100％。然後

頁腳給出以下規則：

#footer { 
clear: both; 
position: relative; 
z-index: 10; 
height: 3em; 
margin-top: -3em; 
}

來源

2013-06-30 13:37:55

謝謝Harsha。我會檢查出來，讓你知道它是否適用於我。 –

好的朋友應該工作 –

當然，你知道你會得到儘可能多的想法，作出迴應的人。在設計時，每個人的意見都不一樣。根據你上面的陳述，我會引導你看到bootstrap下載的bootstrap sticky-footer例子。此外，根據我的經驗，如果您做一些工作並調整照片大小，使其在旋轉木馬中顯得自然，它會更好。當圖像被拉伸以適應它時會扭曲一些東西。花點時間和實驗。另外，我發現使用bootstrap的英雄模板頁面可以很好地處理你正在嘗試做的事情。試試吧！

Tony Tambe：引導程序具有所有響應代碼是，但是您將不得不添加一些@media查詢到您的樣式中，以使標題的大小和標題下方的下劃線向下移動等。您可以將@media query添加到使用樣式元素的HTML頁面（在頭部分）。繼續試驗，看起來不錯。

來源

2013-06-30 13:50:35 vbmike

謝謝vbmike。我一直在試驗幾個星期，看看使用旋轉木馬的最佳方式是什麼。我想讓「藍調」躺在旋轉木馬上，但是頁腳要堅守底部。我在其他地方看到了粘腳，所以我會嘗試。感謝您的建議。 –

我已經在我的開始模板中包含的一個示例是在此站點：http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page – vbmike

再次感謝vbmike。我已經調整好了，但如果你不介意的話，我會有一個跟進問題。如果現在檢查出來，您會發現調整瀏覽器窗口的大小最終會顯示灰色背景，導航欄會繼續。任何造型技巧？我可以調整一個常規的導航欄，但引導程序具有所有響應代碼，所以我不想過多地搞亂它。 –

引導佈局 - 粘貼頁腳和內容行到底部

回答

相關問題