使用Flexbox的頁腳

嘗試使用Flexbox創建頁腳時遇到問題。我希望頁腳使用align-items: flex-end出現在網頁的底部。我在這個網站上找到了一個答案，說我需要爲我的代碼添加100％的高度，但是當我這樣做時，它增加的不僅僅是屏幕的高度，而且使得我需要滾動才能看到頁腳。下面是我在做什麼（我做了整個頁腳綠色，所以我可以看到發生了什麼事）的基礎：使用Flexbox的頁腳

http://jsfiddle.net/kk4jec81/2/

預先感謝您的幫助！

來源

2014-11-05 heelercs

你想讓頁腳停留在底部嗎？如果是這樣，你是否希望內容在頁面填滿時將其推開（要求向下滾動以查看頁腳），還是希望頁腳始終卡在底部（以便它看不到你的網頁上有多少內容）？ – 2014-11-06 20:09:02

我剛剛一直在玩弄你創造的東西...雖然我不認爲這是你正在尋找的東西，但我認爲可能有些東西會幫助你。 [更新的小提琴]（http://jsfiddle.net/fishgraphics/kk4jec81/3/）讓我確切地知道你在找什麼，我會看看我能做些什麼。 – 2014-11-06 21:22:55

我知道它已經有一段時間，因爲有人問，但這裏有一個方法來解決這個問題： http://jsfiddle.net/kk4jec81/9/

我添加了一些意見上的CSS，但我所做的是body {display:flex;flex-flow:column;}，然後我刪除的100％頁腳，最後.menuContainer {margin-top:auto;}。

希望有所幫助。

來源

2015-05-04 14:42:58 Remi

使用Flexbox的頁腳

回答

相關問題