У меня есть следующая панель навигации внизу моего сайта: (от w3schools)
html
</div>
<div class="navbar">
<a href="WEBSITE_LINK"
class="active">Home</a>
<a href="#WEBSITE_LINK">News</a>
<a href="WEBSITE_LINK">Site Notice</a>
</div>
css
.navbar {
background-color: #333;
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #ca3160;
color: white;
}
Если пользователь смартфона хочет ввести что-то в мое текстовое поле (над панелью навигации), панель навигации подталкивается предстоящей клавиатурой. Поэтому почти весь экран заблокирован клавиатурой и навигационной панелью. Так как я могу закрепить панель навигации внизу, даже если я открою "клавиатуру"? Спасибо за внимание.