Как сделать скроллинг для блоков не выходил за рамки границы?

136
19 ноября 2020, 16:40

У меня есть комнаты с классом 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>
Вот песочница https://codepen.io/rusline/pen/dwPaGQ

Answer 1

У вас не очень понятно записан вопрос и код на препроцессоре читать неудобно. Упростите вопрос, плиз. Тогда можно будет упростить ответ :)

Но похоже что вам надо сделать так, чтобы чат был высотой во весь экран, а скроллирование происходило внутри чата. Ну как чат во вконтакте, например. Да? Я вижу два подхода к тому как это можно сделать.

1) Начиная от элемента html и вглубь до самого окна с лентой диалога вы повсеместно используете height: 100%; и там где начинается лента сообщений используете overflow-y: scroll. Таким образом вы создадите скролл в нужном месте, а главный страничный скролл выключится.

2) Более предпочтительно -- это оставить ленту сообщений как основной контент страницы и тогда эта лента будет скроллироваться как обычно. Все остальные элементы интерфейса чата, в таком случае, делаете через position: fixed. Такие элементы не будут поддаваться скроллу.

Answer 2

Сделал фиксированным высоте через 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>

READ ALSO
Выравнивание полей структуры

Выравнивание полей структуры

Прочитал ответ на этот вопрос, где говорилось о выравнивании полей структуры и загорелся идеей пересчитать размер такой структуры:

126
Крашится приложение qt на другом ПК [закрыт]

Крашится приложение qt на другом ПК [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском

118
Блокировка регуляторов звука

Блокировка регуляторов звука

Можно ли каким либо способом программно заблокировать изменение уровня звука в системе?

109
Qt5: Обращение к данным в QVector для записи данных

Qt5: Обращение к данным в QVector для записи данных

Есть класс (который по сути своей структура и далее я буду называть его именно так):

135