響應式網頁中的粘性頁腳 - 當窗口調整大小時重疊內容

我正在製作液體頁面，並且我有一個水平菜單欄（ul）絕對定位到底部（粘性頁腳）。響應式網頁中的粘性頁腳 - 當窗口調整大小時重疊內容

Expected behaviour

這個東西沒有問題，但是當我調整瀏覽器，明顯向上堆疊彼此菜單內元素，使得菜單過高和主要內容重疊。

The problem with the overlap

有什麼辦法（以下任一）

使絕對postioned菜單成長「向下」？
或設置在一定高度對齊底部的邊緣（以使它從該點到底部增長）？
或給佈局的菜單，使其推動上述元素（我試過玩overflow，但不工作對我來說）？

這就是HTML：

<div class="container"> 
    <div class="izda"> 
     Foo 
    </div> 
    <div class="dcha"> 
     <p>Lorem ipsum dolor</p> 
     <p>Lorem ipsum dolor</p> 
     <p>Lorem ipsum dolor</p> 

     <p>Lorem ipsum dolor LAST</p> 
     <ul> 
      <li>Item</li> 
      <li>Another</li> 
      <li>More</li> 
      <li>Item</li> 
     </ul> 
    </div> 
</div>

而CSS：

.container {position:relative} 
.izda {background:red; 
     height:20em; 
     display:inline-block; 
     width:20%; 
     vertical-align:top; 
} 
.dcha {background:gold; 
     display:inline-block; 
     width:78%; 
     margin-bottom:3em; 
} 
ul {position:absolute; 
    bottom:0; 
    background:pink; 
    margin:0; 
    padding:0; 
    max-width:100%; 
} 
ul li {float:left; 
     list-style:none; 
     border:1px solid black; 
     margin:0 1em; 
     padding:1em; 
}

工作示例這裏：http://jsfiddle.net/KQhLs/2/

若y你可以寫更多的段落，菜單正好順着他父親的底部。

Sticky footer properly push down

但調整框架的時候可以看到的重疊效應。

在此先感謝。網絡應該只在現代瀏覽器中工作，如果可能的話，使用純CSS（無JS）。

編輯：我覺得風在吹以下方式： How to avoid fixed element from hovering page contents? 要結束這個： Sticky Footer for Responsive Site

但目前還沒有有用的答案...

好吧，其實我可以通過媒體查詢來防止這種情況，這很簡單。但我想知道是否有「一勞永逸」解決方案。

EDIT2：我剛纔所讀A list apart - Exploring footers。 Aside JS解決方案我嘗試了所有，但問題仍然存在 - 如果您在頁腳中放置浮動元素，它將與主要內容重疊。

此外，我已閱讀CSS Sticky Footer，它似乎有同樣的問題。

我不知道這是不可能實現與純CSS ...我應該放棄嗎？

來源

2013-03-13 Arkana

使絕對位置菜單增長「向下」？

在您<UL>頁腳元素，top: 83%

更換bottom:0或者，如果你想按像素控制它，用top: 100%; margin-top: -54px;

來源

2013-04-18 08:55:37 sphair

感謝您的回答。我試圖避免像素單位，因爲網絡被認爲是液體。在這個具體的例子中，你的解決方案是有效的，但不夠好，因爲如果第二列增長，頁腳不再粘在底部。有一個[小提琴]（http://jsfiddle.net/KQhLs/7/）實施你的建議。 – Arkana

好吧，所以百分比是我認同的黑客。像素邊距的第二個解決方案在你的例子中工作正常，如果你想讓頁腳位於頁面底部並向下增長（這是你想要的，還是應該固定在屏幕底部？），但是如果你想要避免使用像素來定義頁腳的高度我沒有選擇:) – sphair

如何使用position：fixed？ – sphair

-1

確保你的包裝/容器是相對的。在它下面放置您的頁腳作爲相對和添加頂部：100％

來源

2013-04-17 14:31:30 DiederikEEn

如果你看到小提琴，容器是相對的又更換bottom:0 ..如果我明白你的意思，那麼把粘腳放在容器下面就行了。 [（Fiddle）]（http://jsfiddle.net/KQhLs/4/） – Arkana

響應式網頁中的粘性頁腳 - 當窗口調整大小時重疊內容

回答

相關問題