如何在LeftNav内创建粘性页脚? [英] How to create a sticky footer inside the LeftNav?

问题描述

我正在尝试在<LeftNav>组件内部创建一个粘性页脚，但迄今为止未成功.这是需要的样子:

I'm trying to create a sticky footer inside the <LeftNav> component, so far unsuccessfully. This is what is needs to look like:

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

I have tried using position: fixed; bottom: 0 and position: absolute; bottom: 0 on the wrapper of the search field, but when the user scrolls the list items the search field travels up. Like this:

有什么办法解决这个问题吗?

Any idea how to fix this?

推荐答案

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

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

• The first one contains the items and has an overflow-y set to auto (to scroll when too long) and a javascript-set height of the navigation panel height minus the search field height (include paddings!)
• The second one is position: absolute, bottom: 0 and width: 100% and contains (or is) your #search field

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

Example where this.props.height is set to my window.innerHeight on window's load and resize events:

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

这篇关于如何在LeftNav内创建粘性页脚?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！