如何在LeftNav內創建粘性頁腳？

Question

我試圖在<LeftNav>組件內部創建一個粘性頁腳，目前爲止失敗。這是什麼是需要的樣子：

我已經在搜索領域的包裝使用position: fixed; bottom: 0和position: absolute; bottom: 0試過，但是當用戶滾動列表項的搜索欄移動起來。就像這樣：

任何想法如何解決這一問題？

Answer 1

職位：固定應該工作。如果沒有關於您如何進行網頁設置的更多信息，則很難更具體。看看這個小提琴，看看是否有幫助：

https://jsfiddle.net/kevinlrak/r1mpf1n8/

#search { 
    position: fixed; 
    background-color: red; 
    bottom: 0; 
    width: 25%; 
} 

Answer 2

你<LeftNav>應該包含兩個要素：

• 第一個包含的項目和有overflow-y設置爲auto （滾動時間過長）以及導航面板高度的javascript-set height減去搜索字段高度（包括填充！）
• 第二個是position: absolute，bottom: 0和width: 100%，幷包含（或）您#search場

例子this.props.height設置爲我window.innerHeight上window的load和resize事件：

<LeftNav> 
    <div style={{overflowY: 'auto', height: (this.props.height - 50) + 'px'}}> 
    {menuItems} 
    </div> 
    <div style={{position: 'absolute', bottom: 0, width: '100%'}}> 
    {{searchField}} 
    </div> 
</LeftNav>