Панель браузера перекрывает часть сайта
Помогите пожалуйста, в мобильной версии сайта панель браузера перекрывает поле ввода
Простите пожалуйста за картинки, не нашел как под сполер спрятать
* {
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;
}
}
<?php
$data = json_decode(file_get_contents("./chats.json"));
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/index.css" rel="stylesheet">
</head>
<body>
<header>
<div class="user-menu">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 212 212" style="width: 40px; height:40px; cursor: pointer; border-radius: 50%;"><path fill="#DFE5E7" class="background" d="M106.251.5C164.653.5 212 47.846 212 106.25S164.653 212 106.25 212C47.846 212 .5 164.654.5 106.25S47.846.5 106.251.5z"></path><path fill="#FFF" class="primary" d="M173.561 171.615a62.767 62.767 0 0 0-2.065-2.955 67.7 67.7 0 0 0-2.608-3.299 70.112 70.112 0 0 0-3.184-3.527 71.097 71.097 0 0 0-5.924-5.47 72.458 72.458 0 0 0-10.204-7.026 75.2 75.2 0 0 0-5.98-3.055c-.062-.028-.118-.059-.18-.087-9.792-4.44-22.106-7.529-37.416-7.529s-27.624 3.089-37.416 7.529c-.338.153-.653.318-.985.474a75.37 75.37 0 0 0-6.229 3.298 72.589 72.589 0 0 0-9.15 6.395 71.243 71.243 0 0 0-5.924 5.47 70.064 70.064 0 0 0-3.184 3.527 67.142 67.142 0 0 0-2.609 3.299 63.292 63.292 0 0 0-2.065 2.955 56.33 56.33 0 0 0-1.447 2.324c-.033.056-.073.119-.104.174a47.92 47.92 0 0 0-1.07 1.926c-.559 1.068-.818 1.678-.818 1.678v.398c18.285 17.927 43.322 28.985 70.945 28.985 27.678 0 52.761-11.103 71.055-29.095v-.289s-.619-1.45-1.992-3.778a58.346 58.346 0 0 0-1.446-2.322zM106.002 125.5c2.645 0 5.212-.253 7.68-.737a38.272 38.272 0 0 0 3.624-.896 37.124 37.124 0 0 0 5.12-1.958 36.307 36.307 0 0 0 6.15-3.67 35.923 35.923 0 0 0 9.489-10.48 36.558 36.558 0 0 0 2.422-4.84 37.051 37.051 0 0 0 1.716-5.25c.299-1.208.542-2.443.725-3.701.275-1.887.417-3.827.417-5.811s-.142-3.925-.417-5.811a38.734 38.734 0 0 0-1.215-5.494 36.68 36.68 0 0 0-3.648-8.298 35.923 35.923 0 0 0-9.489-10.48 36.347 36.347 0 0 0-6.15-3.67 37.124 37.124 0 0 0-5.12-1.958 37.67 37.67 0 0 0-3.624-.896 39.875 39.875 0 0 0-7.68-.737c-21.162 0-37.345 16.183-37.345 37.345 0 21.159 16.183 37.342 37.345 37.342z"></path></svg>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg>
</div>
<div class="icon">
<span data-testid="chat" data-icon="chat" class=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M19.005 3.175H4.674C3.642 3.175 3 3.789 3 4.821V21.02l3.544-3.514h12.461c1.033 0 2.064-1.06 2.064-2.093V4.821c-.001-1.032-1.032-1.646-2.064-1.646zm-4.989 9.869H7.041V11.1h6.975v1.944zm3-4H7.041V7.1h9.975v1.944z"></path></svg></span>
</div>
<div class="icon">
<span data-testid="status-v3" data-icon="status-v3" class=""><svg id="ee51d023-7db6-4950-baf7-c34874b80976" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 20.664a9.163 9.163 0 0 1-6.521-2.702.977.977 0 0 1 1.381-1.381 7.269 7.269 0 0 0 10.024.244.977.977 0 0 1 1.313 1.445A9.192 9.192 0 0 1 12 20.664zm7.965-6.112a.977.977 0 0 1-.944-1.229 7.26 7.26 0 0 0-4.8-8.804.977.977 0 0 1 .594-1.86 9.212 9.212 0 0 1 6.092 11.169.976.976 0 0 1-.942.724zm-16.025-.39a.977.977 0 0 1-.953-.769 9.21 9.21 0 0 1 6.626-10.86.975.975 0 1 1 .52 1.882l-.015.004a7.259 7.259 0 0 0-5.223 8.558.978.978 0 0 1-.955 1.185z"></path></svg></span>
</div>
</div>
<div class="contact-header">
<div id="return-back">
<svg class="strelka-left-3" viewBox="0 0 5 9">
<path d="M0.419,9.000 L0.003,8.606 L4.164,4.500 L0.003,0.394 L0.419,0.000 L4.997,4.500 L0.419,9.000 Z" ></path>
</svg>
</div>
<img id="header-img" style="margin-right: 15px; width: 40px; height: 40px; border-radius: 50%;" src=<?=$data[0]->avat;?>>
<div>
<div class="contact-header-name" id="header-name">
<?=$data[0]->name;?>
</div>
<div class="typing">Печатает...</div>
</div>
<div id="header-buttons" style="position: absolute; right: 16px; color: #b1b3b5; display: flex;">
<div style="display: flex; margin-right: 10px;">
<a style="margin: auto;">Поддержать</a>
</div>
<div style="display: flex; margin-right: 10px;">
<a style="margin: auto;">Информация</a>
</div>
<div id="search-icon" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M15.9 14.3H15l-.3-.3c1-1.1 1.6-2.7 1.6-4.3 0-3.7-3-6.7-6.7-6.7S3 6 3 9.7s3 6.7 6.7 6.7c1.6 0 3.2-.6 4.3-1.6l.3.3v.8l5.1 5.1 1.5-1.5-5-5.2zm-6.2 0c-2.6 0-4.6-2.1-4.6-4.6s2.1-4.6 4.6-4.6 4.6 2.1 4.6 4.6-2 4.6-4.6 4.6z"></path></svg>
</div>
<div id="menu-icon" class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z"></path></svg>
</div>
</div>
</div>
</header>
<div class="main">
<div class="chats">
<div class="search" style="color: #828689;">
<div class="search-input">
<div style="position: absolute; left: 24px; top: 71px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M15.009 13.805h-.636l-.22-.219a5.184 5.184 0 0 0 1.256-3.386 5.207 5.207 0 1 0-5.207 5.208 5.183 5.183 0 0 0 3.385-1.255l.221.22v.635l4.004 3.999 1.194-1.195-3.997-4.007zm-4.808 0a3.605 3.605 0 1 1 0-7.21 3.605 3.605 0 0 1 0 7.21z"></path></svg>
</div>
<div style="position: absolute; z-index: 100; left: 77px; top: 72px; font-size: 14px; user-select: none;">
Поиск или новый чат
</div>
</div>
</div>
<?php
$first = true;
$k=0;
foreach ($data as $chat){
$k+=1;
if ($first){
$first = false;
echo "<div class=\"chat active\" id=\"".strval($k)."\" onclick=\"setActive('".strval($k)."')\"><div class=\"avatar\"><img src=\"".$chat->avat."\"></div><div class=\"name first\"><div>".$chat->name."</div></div></div>";
} else {
echo "<div class=\"chat\" id=\"".strval($k)."\" onclick=\"setActive('".strval($k)."')\"><div class=\"avatar\"><img src=\"".$chat->avat."\"></div><div class=\"name\"><div>".$chat->name."</div></div></div>";
}
}
?>
</div>
<div class="current">
<?php
$k=0;
$first = true;
foreach ($data as $chat){
$k+=1;
if ($first){
echo "<div class=\"current-chat\" id=\"chat".strval($k)."\"><div class=\"messages\" id=\"messages".strval($k)."\"></div></div>";
} else {
echo "<div class=\"current-chat\" id=\"chat".strval($k)."\" style=\"display: none;\"><div class=\"messages\" id=\"messages".strval($k)."\"></div></div>";
}
$first = false;
}
?>
<div class="current-chat-input">
<div style="padding: 13px 10px; color: #828689;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="26" height="26" style="margin-right: 8px;"><path fill="currentColor" d="M9.153 11.603c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962zm-3.204 1.362c-.026-.307-.131 5.218 6.063 5.551 6.066-.25 6.066-5.551 6.066-5.551-6.078 1.416-12.129 0-12.129 0zm11.363 1.108s-.669 1.959-5.051 1.959c-3.505 0-5.388-1.164-5.607-1.959 0 0 5.912 1.055 10.658 0zM11.804 1.011C5.609 1.011.978 6.033.978 12.228s4.826 10.761 11.021 10.761S23.02 18.423 23.02 12.228c.001-6.195-5.021-11.217-11.216-11.217zM12 21.354c-5.273 0-9.381-3.886-9.381-9.159s3.942-9.548 9.215-9.548 9.548 4.275 9.548 9.548c-.001 5.272-4.109 9.159-9.382 9.159zm3.108-9.751c.795 0 1.439-.879 1.439-1.962s-.644-1.962-1.439-1.962-1.439.879-1.439 1.962.644 1.962 1.439 1.962z"></path></svg>
</div>
<input id="message" placeholder="Введите сообщение" style="margin: 5px 10px; padding: 9px 12px 11px; flex: 1 auto; border-radius: 21px; background-color: #33383b; outline:none; border: 1px solid #33383b; color: white; font-size: 15px;"/>
<div style="color: #828689; padding: 13px 1px;" id="button" onclick="sendMessage('1')">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="currentColor" d="M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z"></path></svg>
</div>
</div>
</div>
</div>
<script>
let id='1';
let isMobile;
if (window.matchMedia("(max-width: 768px)").matches){
document.getElementById('1').classList.remove('active');
document.getElementById('menu-icon').parentNode.removeChild(document.getElementById('menu-icon'));
document.getElementById('search-icon').parentNode.removeChild(document.getElementById('search-icon'));
isMobile = true;
document.getElementById('return-back').addEventListener('click', ()=>{
document.getElementsByClassName('user-menu')[0].style.display = 'block';
document.getElementsByClassName('contact-header')[0].style.display = 'none';
document.getElementsByClassName('current')[0].style.display = 'none';
document.getElementsByClassName('chats')[0].style.display = 'block';
});
} else {
document.getElementsByClassName('current-chat-input')[0].addEventListener('keydown', (e)=>{
if (e.keyCode === 13){
sendMessage(id);
}
})
}
function expandMessage(e){
this.innerHTML = e;
this.onclick = null;
this.classList.remove('longText');
}
function setActive(e) {
let chats = [<?php
$k=0;
foreach ($data as $chat){
$k+=1;
echo "'chat".strval($k)."',";
}
?>];
chats.forEach((elem) => {
if (elem.indexOf(e)+1){
document.getElementById(elem).style.display = "block";
document.getElementById("button").onclick = function() {sendMessage(e)};
id = e.toString();
document.getElementById(e).classList.add("active");
} else {
document.getElementById(elem).style.display = "none";
document.getElementById(elem[elem.length - 1]).classList.remove("active");
}
});
<?php
$first = true;
$k=0;
foreach ($data as $chat){
$k+=1;
if ($first) {
echo "if (e==".strval($k).") {\n";
echo " document.getElementById('header-name').innerHTML = '".$chat->name."';\n";
echo " document.getElementById('header-img').src = '".$chat->avat."';\n";
echo " }\n";
} else {
echo " else if (e==".strval($k).") {\n";
echo " document.getElementById('header-name').innerHTML = '".$chat->name."';\n";
echo " document.getElementById('header-img').src = '".$chat->avat."';\n";
echo " }\n";
}
$first = false;
}
?>
if (isMobile){
document.getElementsByClassName('user-menu')[0].style.display = 'none';
document.getElementsByClassName('contact-header')[0].style.display = 'flex';
document.getElementsByClassName('current')[0].style.display = 'block';
document.getElementsByClassName('chats')[0].style.display = 'none';
document.getElementsByClassName('current')[0].style.minWidth = 0;
}
}
async function sendMessage(e){
const date = new Date();
const nowDate = date.getDate()+"."+date.getMonth()+"."+date.getFullYear();
<?php
$k=0;
$first = true;
foreach ($data as $chat){
$k+=1;
if ($first){
echo "if (e===\"".strval($k)."\") var msgs = document.getElementById(\"messages".strval($k)."\");\n";
} else {
echo " else if (e===\"".strval($k)."\") var msgs = document.getElementById(\"messages".strval($k)."\");\n";
}
$first = false;
}
?>
let msg = document.getElementById("message").value;
if (msg===""){
return;
}
var html = '<div class="msg"><div class="msg-to">'+msg+'</div><div style="color: #056162;"><span data-testid="tail-out" data-icon="tail-out" class="_3N37N"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 13" width="8" height="13"><path opacity=".13" d="M5.188 1H0v11.193l6.467-8.625C7.526 2.156 6.958 1 5.188 1z"></path><path fill="currentColor" d="M5.188 0H0v11.193l6.467-8.625C7.526 1.156 6.958 0 5.188 0z"></path></svg></span></div></div>';
msgs.insertAdjacentHTML('beforeEnd', html);
document.getElementById("message").value = "";
fetch("./getText.php?id="+(e-1))
.then(data => data.text())
.then(data => html = data);
await new Promise(r => setTimeout(r, 500));
document.getElementsByClassName('typing')[0].style.display = "block";
await new Promise(r => setTimeout(r, 5000));
html = html.replaceAll('\n', '<br>');
html = html.replaceAll('\r', '');
msgs.insertAdjacentHTML('beforeEnd', html);
document.getElementsByClassName('typing')[0].style.display = "none";
}
</script>
</body>
</html>
Ответы (1 шт):
Автор решения: Олег
→ Ссылка
попробуйте:
height: 100%;
height: -moz-available;
height: -webkit-fill-available;
height: fill-available;