Как правильно реализовать мобильное меню?

Question

[sadieff]

Подскажите, как правильно реализовать меню для мобильных? Делал меню на весь кран через position: fixed; высотой 100vh, а в нем само меню с overflow; scroll;
Еще внизу меню должны быть 2 кнопки: https://yadi.sk/i/59YJ_Q4F3R3qLh
Но:
1. у мобильных браузеров есть навигационный бар. При прокрутке вниз он исчезает, вверх - появляется. Высота все время скачет. И кнопки то видно нормально, то наполовину.
2. При прокрутке пунктов меню прокручивается вся остальная страница.
Как правильно реализовывать меню чтобы оно работало нормально с барами браузера и не было скрола страницы?

P.S. 2 проблема решилась навешиванием на body overflow: hidden

Answer 1

[mdss]

указывать высоту не обязательно. Т.к. элемент с фиксированным положением, можно указать ему границы

.menu {
position:fixed;
top:0;
bottom:0;
left:0;
overflow-y:auto;
}

Самое простое решение для прижатия кнопок в меню это будут флексы

.menu {
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	flex-direction:column;
	position:fixed;
	top:0; bottom:0; left:0;
	width:200px;
}
	.menu__main {
		flex:1;
	}
	.menu__bottom {
		flex-shrink:0;
		height:50px;
	}

<div class="menu">
	<div class="menu__main"></div>
	<div class="menu__bottom">%buttons%</div>
</div>