У меня есть комнаты с классом chat-list_rooms и список сообщений с классом chat-message. Мне нужно, чтобы при превышение body. Пока не понял как. Потому что body сам по себе резиновый и если сделать его hidden то скроллы не будут работать так как нужно, то есть скролла не будет и форма отправки сообщение тоже исчезник в пределах скрытой области.
/* Mixins */
/* Style */
html,
body {
font-family: 'Roboto Condensed', sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
input:focus {
border: 1px solid #d8d8d8;
outline: none;
}
i {
cursor: pointer;
}
.chat-index {
display: grid;
margin: 0px 15%;
grid-template-columns: 1fr 3fr;
height: 100%;
max-height: auto;
border: 1px solid #d8d8d8;
}
.chat-index .chat-column-left {
border-right: none;
}
.chat-index .chat-column-left .chat-profile {
background: #dc3545;
color: #fff;
display: grid;
grid-template-row: 20px 1fr;
}
.chat-index .chat-column-left .chat-profile_content {
display: grid;
justify-content: center;
margin: 0 0 25px 0;
}
.chat-index .chat-column-left .chat-profile_content .avatar-user {
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
margin-bottom: 10px;
}
.chat-index .chat-column-left .chat-profile_content .avatar-user img {
width: 100px;
height: 100px;
}
.chat-index .chat-column-left .chat-profile_content .user-fullname {
font-weight: bold;
text-align: center;
}
.chat-index .chat-column-left .chat-list_search {
position: relative;
}
.chat-index .chat-column-left .chat-list_search .search-icon {
left: 5px;
position: absolute;
top: 10px;
font-size: 19px;
color: #a2a2a2;
}
.chat-index .chat-column-left .chat-list_search input {
padding: 5px 15px 5px 25px;
width: 100%;
border-radius: 4px;
box-sizing: border-box;
height: 35px;
border: 1px solid #d8d8d8;
}
.chat-index .chat-column-left .chat-list_search .close-icon {
right: 0;
position: absolute;
top: 10px;
font-size: 19px;
color: #a2a2a2;
display: none;
}
.chat-index .chat-column-left .chat-list_rooms {
overflow: auto;
}
.chat-index .chat-column-left .chat-list_content {
border: 1px solid #d8d8d8;
display: grid;
grid-template-columns: 65px 1fr;
padding: 10px;
}
.chat-index .chat-column-left .chat-list_content .avatar {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid #d8d8d8;
overflow: hidden;
}
.chat-index .chat-column-left .chat-list_content .avatar img {
width: 65px;
height: 65px;
}
.chat-index .chat-column-left .chat-list_content_description_body {
display: grid;
grid-template-columns: 2fr 1fr;
}
.chat-index .chat-column-left .chat-list_content_description_body_message {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chat-index .chat-column-right {
display: grid;
grid-template-rows: 50px 5fr 50px;
}
.chat-index .chat-column-right .chat-info {
display: grid;
grid-template-columns: 5fr 1fr;
padding: 5px 10px;
background: #dc3545;
color: #fff;
}
.chat-index .chat-column-right .chat-info_user_fullname {
font-weight: bold;
}
.chat-index .chat-column-right .chat-info_user_last_visit {
color: rgba(255, 255, 255, 0.8);
}
.chat-index .chat-column-right .chat-info_search {
display: grid;
align-content: center;
}
.chat-index .chat-column-right .chat-info_search_icon {
text-align: right;
}
.chat-index .chat-column-right .chat-info_search_icon i {
font-size: 20px;
}
.chat-index .chat-column-right .chat-message {
border-left: 1px solid #d8d8d8;
overflow: auto;
}
.chat-index .chat-column-right .chat-message_content {
width: 50%;
padding: 5px;
margin: 10px;
border-radius: 8px;
}
.chat-index .chat-column-right .chat-message_content.interlocutor-message {
float: left;
background: #d8d8d8;
}
.chat-index .chat-column-right .chat-message_content.own-message {
float: right;
border: 1px solid #d8d8d8;
}
.chat-index .chat-column-right .chat-message_content_date {
text-align: right;
font-size: 14px;
color: #847979;
}
.chat-index .chat-column-right .chat-form {
border: 1px solid #d8d8d8;
align-items: center;
}
.chat-index .chat-column-right .chat-form_form {
display: grid;
grid-template-columns: 0.1fr 4fr 0.1fr;
align-items: center;
}
.chat-index .chat-column-right .chat-form_form_attach {
justify-content: center;
align-items: center;
margin: 5px;
}
.chat-index .chat-column-right .chat-form_form_attach:hover {
color: #dc3545;
}
.chat-index .chat-column-right .chat-form_form_message {
margin-right: 5px;
}
.chat-index .chat-column-right .chat-form_form_message textarea {
width: calc(100% - 10px);
border: 1px solid rgba(255, 255, 255, 0);
outline: none;
font-size: 15px;
resize: none;
}
.chat-index .chat-column-right .chat-form_form_submit button {
background: none;
border: 1px solid rgba(255, 255, 255, 0);
}
.chat-index .chat-column-right .chat-form_form_submit button:hover {
color: #dc3545;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<div class="chat-index">
<div class="chat-column-left">
<div class="chat-profile">
<i class="material-icons">dehaze</i>
<div class="chat-profile_content">
<div class="avatar-user">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="user-fullname">Петров Петр</div>
</div>
</div>
<div class="chat-list">
<div class="chat-list_search">
<i class="material-icons search-icon">search</i>
<input type="text" placeholder="Поиск" id="search">
<i class="material-icons close-icon">close</i>
</div>
<div class="chat-list_rooms">
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chat-column-right">
<div class="chat-info">
<div class="chat-info_user">
<div class="chat-info_user_fullname">Иван Иванов</div>
<div class="chat-info_user_last_visit">Был в сети 34 минут</div>
</div>
<div class="chat-info_search">
<div class="chat-info_search_icon">
<label for="search">
<i class="material-icons">search</i>
</label>
</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content own-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content own-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content own-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
</div>
<div class="chat-form">
<form action="#" class="chat-form_form">
<div class="chat-form_form_attach">
<i class="material-icons">attach_file</i>
</div>
<div class="chat-form_form_message">
<textarea placeholder="Введите текст"></textarea>
</div>
<div class="chat-form_form_submit">
<button>
<i class="material-icons">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
У вас не очень понятно записан вопрос и код на препроцессоре читать неудобно. Упростите вопрос, плиз. Тогда можно будет упростить ответ :)
Но похоже что вам надо сделать так, чтобы чат был высотой во весь экран, а скроллирование происходило внутри чата. Ну как чат во вконтакте, например. Да? Я вижу два подхода к тому как это можно сделать.
1) Начиная от элемента html и вглубь до самого окна с лентой диалога вы повсеместно используете height: 100%; и там где начинается лента сообщений используете overflow-y: scroll. Таким образом вы создадите скролл в нужном месте, а главный страничный скролл выключится.
2) Более предпочтительно -- это оставить ленту сообщений как основной контент страницы и тогда эта лента будет скроллироваться как обычно. Все остальные элементы интерфейса чата, в таком случае, делаете через position: fixed. Такие элементы не будут поддаваться скроллу.
Сделал фиксированным высоте через vh. То выходит так как надо
Убрал из .chat-column-right display:grid
И зафиксировал высоту список комнат
&_rooms {
overflow: auto;
height: 55vh
}
/* Mixins */
/* Style */
html,
body {
font-family: 'Roboto Condensed', sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
input:focus {
border: 1px solid 1px;
outline: none;
}
i {
cursor: pointer;
}
.chat-index {
display: grid;
margin: 0px 15%;
grid-template-columns: 1fr 3fr;
height: 100%;
max-height: auto;
border: 1px solid #d8d8d8;
}
.chat-index .chat-column-left {
border-right: none;
}
.chat-index .chat-column-left .chat-profile {
background: #dc3545;
color: #fff;
display: grid;
grid-template-row: 20px 1fr;
}
.chat-index .chat-column-left .chat-profile_content {
display: grid;
justify-content: center;
margin: 0 0 25px 0;
}
.chat-index .chat-column-left .chat-profile_content .avatar-user {
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
margin-bottom: 10px;
}
.chat-index .chat-column-left .chat-profile_content .avatar-user img {
width: 100px;
height: 100px;
}
.chat-index .chat-column-left .chat-profile_content .user-fullname {
font-weight: bold;
text-align: center;
}
.chat-index .chat-column-left .chat-list_search {
position: relative;
}
.chat-index .chat-column-left .chat-list_search .search-icon {
left: 5px;
position: absolute;
top: 10px;
font-size: 19px;
color: #a2a2a2;
}
.chat-index .chat-column-left .chat-list_search input {
padding: 5px 15px 5px 25px;
width: 100%;
border-radius: 4px;
box-sizing: border-box;
height: 35px;
border: 1px solid #d8d8d8;
}
.chat-index .chat-column-left .chat-list_search .close-icon {
right: 0;
position: absolute;
top: 10px;
font-size: 19px;
color: #a2a2a2;
display: none;
}
.chat-index .chat-column-left .chat-list_rooms {
overflow: auto;
height: 55vh;
}
.chat-index .chat-column-left .chat-list_content {
border: 1px solid #d8d8d8;
display: grid;
grid-template-columns: 65px 1fr;
padding: 10px;
}
.chat-index .chat-column-left .chat-list_content .avatar {
width: 50px;
height: 50px;
border-radius: 25px;
border: 1px solid #d8d8d8;
overflow: hidden;
}
.chat-index .chat-column-left .chat-list_content .avatar img {
width: 65px;
height: 65px;
}
.chat-index .chat-column-left .chat-list_content_description_body {
display: grid;
grid-template-columns: 2fr 1fr;
}
.chat-index .chat-column-left .chat-list_content_description_body_message {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chat-index .chat-column-right .chat-info {
display: grid;
grid-template-columns: 5fr 1fr;
padding: 5px 10px;
background: #dc3545;
color: #fff;
}
.chat-index .chat-column-right .chat-info_user_fullname {
font-weight: bold;
}
.chat-index .chat-column-right .chat-info_user_last_visit {
color: rgba(255, 255, 255, 0.8);
}
.chat-index .chat-column-right .chat-info_search {
display: grid;
align-content: center;
}
.chat-index .chat-column-right .chat-info_search_icon {
text-align: right;
}
.chat-index .chat-column-right .chat-info_search_icon i {
font-size: 20px;
}
.chat-index .chat-column-right .chat-message {
border-left: 1px solid #d8d8d8;
overflow-y: scroll;
height: 80vh;
}
.chat-index .chat-column-right .chat-message_content {
width: 50%;
padding: 5px;
margin: 10px;
border-radius: 8px;
}
.chat-index .chat-column-right .chat-message_content.interlocutor-message {
float: left;
background: #d8d8d8;
}
.chat-index .chat-column-right .chat-message_content.own-message {
float: right;
border: 1px solid #d8d8d8;
}
.chat-index .chat-column-right .chat-message_content_date {
text-align: right;
font-size: 14px;
color: #847979;
}
.chat-index .chat-column-right .chat-form {
border: 1px solid #d8d8d8;
align-items: center;
}
.chat-index .chat-column-right .chat-form_form {
display: grid;
grid-template-columns: 0.1fr 4fr 0.1fr;
align-items: center;
}
.chat-index .chat-column-right .chat-form_form_attach {
justify-content: center;
align-items: center;
margin: 5px;
}
.chat-index .chat-column-right .chat-form_form_attach:hover {
color: #dc3545;
}
.chat-index .chat-column-right .chat-form_form_message {
margin-right: 5px;
}
.chat-index .chat-column-right .chat-form_form_message textarea {
width: calc(100% - 10px);
border: 1px solid rgba(255, 255, 255, 0);
outline: none;
font-size: 15px;
resize: none;
}
.chat-index .chat-column-right .chat-form_form_submit button {
background: none;
border: 1px solid rgba(255, 255, 255, 0);
}
.chat-index .chat-column-right .chat-form_form_submit button:hover {
color: #dc3545;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css" rel="stylesheet"/>
<div class="chat-index">
<div class="chat-column-left">
<div class="chat-profile">
<i class="material-icons">dehaze</i>
<div class="chat-profile_content">
<div class="avatar-user">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="user-fullname">Петров Петр</div>
</div>
</div>
<div class="chat-list">
<div class="chat-list_search">
<i class="material-icons search-icon">search</i>
<input type="text" placeholder="Поиск" id="search">
<i class="material-icons close-icon">close</i>
</div>
<div class="chat-list_rooms">
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
<div class="chat-list_content">
<div class="avatar">
<img src="https://i.kinja-img.com/gawker-media/image/upload/s--dMTJCIXu--/c_scale,f_auto,fl_progressive,q_80,w_800/myblkoukcgxb3dn1vyd7.jpg">
</div>
<div class="chat-list_content_description">
<div class="chat-list_content_description_header">
<span>Иван Иванов</span>
</div>
<div class="chat-list_content_description_body">
<div class="chat-list_content_description_body_message"> <span>Lorem ipsum dolor sit amet.</span>
</div>
<div class="chat-list_content_description_body_time"> <span>10.12.2019</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="chat-column-right">
<div class="chat-info">
<div class="chat-info_user">
<div class="chat-info_user_fullname">Иван Иванов</div>
<div class="chat-info_user_last_visit">Был в сети 34 минут</div>
</div>
<div class="chat-info_search">
<div class="chat-info_search_icon">
<label for="search">
<i class="material-icons">search</i>
</label>
</div>
</div>
</div>
<div class="chat-message">
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content own-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content own-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content interlocutor-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
<div class="chat-message_content own-message">
<div class="chat-message_content_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id unde laboriosam facilis esse a rem pariatur sequi doloribus corporis doloremque?</div>
<div class="chat-message_content_date">
10.12.2019
</div>
</div>
</div>
<div class="chat-form">
<form action="#" class="chat-form_form">
<div class="chat-form_form_attach">
<i class="material-icons">attach_file</i>
</div>
<div class="chat-form_form_message">
<textarea placeholder="Введите текст"></textarea>
</div>
<div class="chat-form_form_submit">
<button>
<i class="material-icons">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Прочитал ответ на этот вопрос, где говорилось о выравнивании полей структуры и загорелся идеей пересчитать размер такой структуры:
Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском
Можно ли каким либо способом программно заблокировать изменение уровня звука в системе?
Есть класс (который по сути своей структура и далее я буду называть его именно так):