如何在LeftNav中创建粘性页脚？

Question

我试图在<LeftNav>组件中创建一个粘性页脚，到目前为止还没有成功。这需要看起来像：

我尝试在搜索字段的包装上使用position: fixed; bottom: 0和position: absolute; bottom: 0，但是当用户滚动列表项时，搜索字段会向上移动。像这样：

知道如何解决这个问题吗？

Answer 1

位置：固定应该有效。如果没有关于如何设置页面的更多信息，则很难更具体。看看这个小提琴，看看是否有帮助：

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

    Scanner sc = new Scanner(System.in);
    int numberPhrases = 0;
    try
    {
      numberPhrases = sc.nextInt();  
    } catch (Exception e)
    {
        //if (no number enterred) {alternative behaviour here}
    }

Answer 2

您的<LeftNav>应包含两个元素：

• 第一个包含项目，overflow-y设置为auto（滚动时间过长）和导航面板高度的javascript设置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>