Я пытаюсь создать липкий нижний колонтитул внутри компонента <LeftNav>, пока безуспешно. Вот как это должно выглядеть:
Я пытался использовать position: fixed; bottom: 0 и position: absolute; bottom: 0 в оболочке поля поиска, но когда пользователь прокручивает элементы списка, поле поиска перемещается вверх. Как это:
Есть идеи, как это исправить?
Положение: исправлено, должно работать. Без дополнительной информации о том, как вы настроили свою страницу, трудно быть более конкретным. Взгляните на эту скрипку и посмотрите, поможет ли это:
https://jsfiddle.net/kevinlrak/r1mpf1n8/
#search {
position: fixed;
background-color: red;
bottom: 0;
width: 25%;
}
Ваш <LeftNav> должен содержать два элемента:
overflow-y, установленный на auto (для прокрутки, когда слишком долго), и javascript-set height высоты панели навигации за вычетом высоты поля поиска (включая отступы!)position: absolute, bottom: 0 и width: 100% и содержит (или есть) ваше поле #search.Пример, где this.props.height устанавливается на мой window.innerHeight в событиях load и resize window:
<LeftNav>
<div style={{overflowY: 'auto', height: (this.props.height - 50) + 'px'}}>
{menuItems}
</div>
<div style={{position: 'absolute', bottom: 0, width: '100%'}}>
{{searchField}}
</div>
</LeftNav>
