Панель браузера перекрывает часть сайта?

Question

[Сергей Филатов]

Помогите пожалуйста, в мобильной версии сайта панель браузера перекрывает поле ввода

Изображение

Код css

* {
  margin: 0;
  padding: 0;
  font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}

body {
  background-color: #0e1315;
}

header {
  display: flex;
  width: 100%;
  height: 59px;
  background-color: #2a2f32;
}

.icon {
  margin-left: 10px;
  float: right;
  padding: 8px;
  cursor: pointer;
}


.main {
  display: flex;
  height: calc(100vh - 59px);
}

.user-menu {
  max-width: 421px;
  min-width: 421px;
  width: 100%;
  height: 100%;
  padding: 10px 16px;
  color: #b1b3b5;
  box-sizing: border-box;
  border-right: 1px solid #404447;
}

.chats {
  flex: 0 100%;
  height: 100%;
  max-width: 420px;
  min-width: 420px;
  background-color: #131c21;
  border-right: 1px solid #404447;
}

.current {
  height: 100%;
  flex: 1 auto;
  min-width: 524px;
  background-color: #0d1418;
  background-repeat: repeat;
}

.current-chat {
  width: 100%;
  overflow-y: auto;
  position: relative;
  background-image: url('../background.png');
  height: calc(100% - 62px);
}

.current-chat::-webkit-scrollbar{
  width: 7px;
  background-color: rgba(0, 0, 0, 0);
}

.current-chat::-webkit-scrollbar-thumb {
    background-color: #323739;
    opacity: 0.5;
}

.current-chat-input {
  width: 100%;
  height: 62px;
  box-sizing: border-box;
  display: flex;
  padding: 5px 10px;
  background-color: #1e2428;
}

.chat {
  cursor: pointer;
  display: flex;
  flex-flow: row wrap;
  height: 72px;
}

.chat:hover{
  background-color: #2d3134;
}

.active {
  background-color: #323739;
}

.active:hover {
  background-color: #323739;
}

.search {
  display: flex;
  height: 48px;
  border-bottom: 1px solid #242d32;
}

.search-input {
  margin: auto;
  width: 100%;
  height: 35px;
  border-radius: 18px;
  background-color: #323739;
}

.avatar {
  padding: 12px 15px 12px 13px;
  width: 49px;
}

.avatar img{
  width: 49px;
  height: 49px;
  border-radius: 50%;
}

.name {
  color: #d4d5d7;
  flex: 1 auto;
  border-top: 1px solid #30383d;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 15px;
}

.first {
  border-top: 0;
}

.contact-header {
  flex: 1 auto;
  display: flex;
  position: relative;
  flex-flow: row wrap;
  padding: 10px 16px;
  min-width: 524px;
}

.typing {
  font-size: 12px;
  display: none;
  color: rgba(241,241,242,0.92);
}

.contact-header-name {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: rgba(241,241,242,0.92);
}

.msg {
  display: flex;
  padding: 0 20px;
  margin-bottom: 20px;
  word-wrap: break-word;
}


.msg-from {
  background-color: #262d31;
  padding: 6px 82px 8px 9px;
  color: rgba(241,241,242,0.95);
  font-size: 14.2px;
  line-height: 19px;
  max-width: 30%;
  margin-right: auto;
  border-radius: 0 7.5px 7.5px 7.5px;
}

.messages {
  margin-top: 20px;
  width: 100%;
  /* position: absolute; */
  /* overflow: auto; */
  bottom: 20px;
}

.msg-to {
  background-color: #056162;
  margin-left: auto;
  padding: 6px 82px 8px 9px;
  max-width: 30%;
  color: rgba(241,241,242,0.95);
  font-size: 14.2px;
  line-height: 19px;
  border-radius: 7.5px 0 7.5px 7.5px;
}

.longText {
  position: relative;
}

.longText:before {
  content:"Нажмите, чтобы развернуть";
  position: absolute;
  bottom: 0;
  width: 90%;
  height: 60px;
  color: #fff;
  line-height: 66px;
  text-align: center;
  background: linear-gradient(to top, #262d31, transparent);
}

#return-back {
  display: none;
  margin-right: 7px;
  width: 20px;
}

.strelka-left-3 {
  transform: rotate(180deg);
  fill: #b1b3b5;
}

@media screen and (max-width: 768px){
  #return-back{
    display: block;
  }
  .contact-header {
    display: none;
  }
  .current {
    display: none;
  }
  .chats {
    max-width: 100%;
    min-width: 320px;
  }
  .user-menu {
    max-width: 100%;
    min-width: 320px;
  }
  .longText:before {
    line-height: normal;
  }
  .contact-header {
    min-width: 0;
  }
  #header-buttons {
    font-size: 14px;
    bottom: 4px;
  }
}

Comments

[Василий Банников]

А какие стили за эту панель отвечают?

[Сергей Филатов]

Василий Банников, Наверное .current-chat-input

Answer 1

[Сергей delphinpro]

https://yandex.ru/search/?text=mobile%20100vh

Comments

[Сергей Филатов]

Попробовал вставить как в статье написано

body {
    display: flex; 
    flex-direction: column;
    margin: 0;
    min-height: 100vh;
    /* mobile viewport bug fix */
    min-height: -webkit-fill-available;
    }
    
    main {
    flex: 1;
    }

Ничего не меняется

Answer 2

[Уктам Хамидов]

Проблема в 100vh, советую поменять на 100%, если не сработает нужно эти 100% передать всем родителям поля ввода, вплоть до body, дело в том что рендерные рассчеты делаются без учета этой панели так как панель исчезает при скролле. А при 100% он будет занимать весь вьюпорт, при этом меняться вместе с ним.