如何在 LeftNav 内创建粘性页脚？答案

【问题标题】：How to create a sticky footer inside the LeftNav?如何在 LeftNav 内创建粘性页脚？
【发布时间】：2016-02-26 21:36:09
【问题描述】：

我正在尝试在<LeftNav> 组件内创建一个粘性页脚，但到目前为止没有成功。这就是需要的样子：

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

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

【问题讨论】：

有点题外话的问题：你用什么工具来创建屏幕模型？

标签： material-ui

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

第一个包含项目并且将overflow-y 设置为auto（太长时滚动）和导航面板高度减去搜索字段高度的javascript 设置height（包括填充！）
第二个是position: absolute、bottom: 0 和width: 100%，包含（或者是）您的#search 字段

在window 的load 和resize 事件中将this.props.height 设置为我的window.innerHeight 的示例：

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

【讨论】：

如何动态确定搜索字段的高度，而不是将其硬编码为 50？