Как я могу держать чат с липким нижним колонтитулом всегда на виду?

Question

Я хочу реализовать чат, который остается на экране с липким нижним колонтитулом, но я действительно застрял.Вот что я хотел бы:

Или, по крайней мере, иметь нижнюю часть моего чата внизу содержимого или экрана.Я использую Bootstrap 4.1.

Я пытался представить вам пример того, что у меня здесь: Образец

Чат придерживается вершины, как я хочу,но из-за навигационной панели он не прилипает к дну.

Answer 1

Лучше просматривать этот фрагмент в полноэкранном режиме

Это то, что я сделал некоторое время назад, и я думаю, это то, что вы ищете;В коде много кода, в основном из-за разметки, поскольку он был целым компонентом, но, возможно, он поможет вам выбрать правильный путь.

Я использую Flexbox и Bootstrap4 для настройки всего, а также для выполнения некоторых вычислений с помощью CSS, но основная идея заключается в создании контейнеров, каждый из которых обрабатывает свое содержимое и переполняется независимо.Вам необходимо определить height, чтобы компоненты оставались на месте, не нажимаясь.Дайте мне знать, если вы собираетесь это делать;может быть, мы можем работать на основе этого.

#messages-section {
  min-height: inherit;
}

#messages-section>div {
  min-height: inherit;
}

.messages-container {
  display: flex;
  min-height: inherit;
  padding-bottom: 40px;
  padding-right: 40px;
}

.messages-container .contacts-box {
  width: 340px;
}

.messages-container .contacts-box .contacts-list {
  overflow-y: auto;
  height: calc(100vh - 100px);
}

.messages-container .contacts-box .contacts-list .contact {
  min-height: 96px;
  border-top: 0.5px solid #efefef;
  border-bottom: 0.5px solid #efefef;
  padding: 20px;
  display: flex;
  align-items: center;
  position: relative;
  color: #363636;
  cursor: pointer;
}

.messages-container .contacts-box .contacts-list .contact.new-messages {
  background-color: #f3f6f9;
}

.messages-container .contacts-box .contacts-list .contact:hover {
  background-color: #f3f6f9;
}

.messages-container .contacts-box .contacts-list .contact:active {
  background-color: rgba(249, 92, 144, 0.096);
}

.messages-container .contacts-box .contacts-list .contact .avatar {
  margin-right: 15px;
}

.messages-container .contacts-box .contacts-list .contact .contact-info {
  max-width: 200px;
}

.messages-container .contacts-box .contacts-list .contact .contact-info p {
  font-size: 12px;
  max-height: 35px;
  overflow: hidden;
  margin: 0;
  user-select: none;
}

.messages-container .contacts-box .contacts-list .contact .timer {
  position: absolute;
  right: 15px;
  top: 10px;
}

.messages-container .contacts-box .contacts-list .contact .timer span {
  font-size: 11px;
  user-select: none;
}

.messages-container .message-box {
  width: calc(100% - 340px);
}

.messages-container .message-box .conversation-panel {
  position: relative;
  height: calc(100vh - 100px);
  border-right: 1px solid #efefef;
}

.messages-container .message-box .conversation {
  border-left: 1px solid #efefef;
  height: calc(100vh - 170px);
  padding: 16px 40px;
  overflow-y: auto;
}

.messages-container .message-box .conversation .message-card {
  padding: 15px;
  border-radius: 10px;
  display: flex;
  margin-bottom: 20px;
  width: fit-content;
}

.messages-container .message-box .conversation .message-card:last-child {
  margin-bottom: 0;
}

.messages-container .message-box .conversation .message-card .avatar {
  align-self: flex-end;
}

.messages-container .message-box .conversation .message-card .message-text {
  font-size: 14px;
}

.messages-container .message-box .conversation .message-card .message-text:last-child {
  margin-bottom: 0;
}

.messages-container .message-box .conversation .message-card.user-message {
  background-color: #f3f6f9;
  flex-direction: row-reverse;
  margin-left: auto;
}

.messages-container .message-box .conversation .message-card.user-message .avatar {
  margin-left: 15px;
}

.messages-container .message-box .conversation .message-card.user-message .message-text {
  text-align: right;
}

.messages-container .message-box .conversation .message-card.contact-message {
  background-color: rgba(249, 92, 144, 0.06);
}

.messages-container .message-box .conversation .message-card.contact-message .avatar {
  margin-right: 15px;
}

.messages-container .message-box .writing-panel {
  height: 70px;
  background-color: #f3f6f9;
  padding: 15px 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
}

.messages-container .message-box .writing-panel button {
  height: 30px;
  width: 30px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s;
}

.messages-container .message-box .writing-panel button:active {
  transform: translateY(2px);
}

.messages-container .message-box .writing-panel button:hover svg {
  opacity: 1 !important;
}

.messages-container .message-box .writing-panel button:hover svg path {
  fill: #de008f;
  transition: all 0.2s;
}

.messages-container .message-box .writing-panel textarea {
  width: 60%;
  padding: 1px 0;
  padding-left: 10px;
  padding-right: 10px;
  border: 2px solid transparent;
  outline: none;
  resize: none;
  transition: all 0.2s;
}

.messages-container .message-box .writing-panel textarea:focus {
  border-color: #de008f;
}

.messages-container .messages-header {
  height: 70px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.messages-container .messages-header.contacts-header {
  border-left: 0px solid #efefef;
  border-top: 2px solid #efefef;
  border-bottom: 1px solid #efefef;
}

.messages-container .messages-header.contacts-header button {
  width: 25px;
  border: none;
  border-radius: 5px;
  box-shadow: none;
  background: url(../assets/img/msg/new-msg.svg) no-repeat;
  background-size: 90%;
  background-position: 50%;
  cursor: pointer;
  margin-left: 5px;
  transition: all 0.2s;
}

.messages-container .messages-header.contacts-header button:active {
  background-color: transparent;
  box-shadow: none !important;
  border: none;
  transform: scale(0.8, 0.8);
}

.messages-container .messages-header.contacts-header .input-group .input-group-text {
  background: none;
  border-color: transparent;
}

.messages-container .messages-header.contacts-header .input-group .form-control {
  border-color: transparent;
  box-shadow: none;
}

.messages-container .messages-header.conversation-header {
  border-left: 1px solid #efefef;
  border-top: 2px solid #efefef;
  border-bottom: 1px solid #efefef;
  border-right: 1px solid #efefef;
}

.messages-container .messages-header.conversation-header .message-title h5 {
  font-weight: 700;
  margin: 0;
}

.messages-container .messages-header.conversation-header .message-title .status-info.online {
  color: #04d2af;
}

.messages-container .messages-header.conversation-header .message-title .status-info.offline {
  color: #ff1e1e;
}

.messages-container .messages-header.conversation-header .call-icon,
.messages-container .messages-header.conversation-header .menu-icon {
  width: 35px;
  height: 35px;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}

.messages-container .messages-header.conversation-header .call-icon:hover .a,
.messages-container .messages-header.conversation-header .menu-icon:hover .a {
  fill: #de008f;
  transition: all 0.2s;
}

.messages-container .messages-header.conversation-header .call-icon:active,
.messages-container .messages-header.conversation-header .menu-icon:active {
  transform: scale(0.8, 0.8);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<section class="section p-0" id="messages-section">
  <div class="">
    <div id="message-window" class="messages-container">
      <div class="contacts-box">
        <header class="messages-header contacts-header">

          <div class="input-group">
            <div class="input-group-prepend">
              <span class="input-group-text" id="basic-addon2">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 17.49 17.49"><defs><style>.a{fill:#363636;}</style></defs><path class="a" d="M15.5,14h-.79l-.28-.27a6.51,6.51,0,1,0-.7.7l.27.28v.79l5,4.99L20.49,19Zm-6,0A4.5,4.5,0,1,1,14,9.5,4.494,4.494,0,0,1,9.5,14Z" transform="translate(-3 -3)"/></svg>
                                            </span>
            </div>
            <input type="text" class="form-control" placeholder="Search by User" aria-label="Search by User" aria-describedby="button-addon2">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary" type="button" id="button-addon2"></button>
            </div>
          </div>
        </header>

        <div id="contact-list" class="contacts-list">
          <div class="contact new-messages" id="contact-item-1">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Grant Marshall</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-2">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Jessica Miles</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-3">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Natasha Gamble</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-4">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Vanessa Ryan</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact new-messages" id="contact-item-5">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Carol Kelly</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-6">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Julia Petersen</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-7">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Marisa Cain</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-8">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Gayle Gaines</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
          <div class="contact" id="contact-item-9">
            <div class="avatar">
              <div class="avatar-container">
                <div class="avatar-photo-box">
                  <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                  <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                </div>
              </div>
            </div>

            <div class="contact-info">
              <h5>Keri Hudson</h5>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, dolor ex aliquam commodi ab incidunt.</p>
            </div>

            <div class="timer">
              <span>15 min</span>
            </div>
          </div>
        </div>
      </div>
      <div class="message-box">
        <header class="messages-header conversation-header">
          <button class="call-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 18 18"><defs><style>.a{fill:#363636;}</style></defs><path class="a" d="M6.62,10.79a15.149,15.149,0,0,0,6.59,6.59l2.2-2.2a.994.994,0,0,1,1.02-.24,11.407,11.407,0,0,0,3.57.57,1,1,0,0,1,1,1V20a1,1,0,0,1-1,1A17,17,0,0,1,3,4,1,1,0,0,1,4,3H7.5a1,1,0,0,1,1,1,11.36,11.36,0,0,0,.57,3.57,1,1,0,0,1-.25,1.02Z" transform="translate(-3 -3)"/></svg>
                                    </button>
          <div class="text-center message-title">
            <h5>Jessica Miles</h5>
            <span class="status-info online">online</span>
          </div>
          <button id="message-back" class="menu-icon">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 5"><defs><style>.a{fill:#363636;}</style></defs><g transform="translate(-1084 -136)"><circle class="a" cx="2.5" cy="2.5" r="2.5" transform="translate(1084 136)"/><circle class="a" cx="2.5" cy="2.5" r="2.5" transform="translate(1092 136)"/><circle class="a" cx="2.5" cy="2.5" r="2.5" transform="translate(1100 136)"/></g></svg>
                                    </button>
        </header>

        <div class="conversation-panel">
          <div class="conversation">
            <div class="message-card contact-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus</p>
              </div>
            </div>
            <div class="message-card user-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
              </div>
            </div>
            <div class="message-card contact-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
              </div>
            </div>
            <div class="message-card user-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
              </div>
            </div>
            <div class="message-card contact-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
              </div>
            </div>
            <div class="message-card user-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
              </div>
            </div>
            <div class="message-card contact-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
              </div>
            </div>
            <div class="message-card user-message">
              <div class="avatar">
                <div class="avatar-container">
                  <div class="avatar-photo-box">
                    <img src="https://via.placeholder.com/50" class="avatar-img user-badge-photo" alt="avatar photo">
                    <img src="../assets/img/green-stat.svg" width="8" class="avatar-status" alt="">
                  </div>
                </div>
              </div>
              <div>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
                <p class="message-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Perferendis esse sapiente vitae dignissimos temporibus. Placeat voluptates commodi quia enim minima quibusdam ducimus tempora quod ut error dolor, eligendi nihil iusto.</p>
              </div>
            </div>
          </div>
          <div class="writing-panel d-flex align-items-center justify-content-center">
            <textarea class="mx-2 mx-md-3" name="message-text" placeholder="Type your message" id="" rows="1"></textarea>
            <button class="send-btn">
                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.925 26.049"><defs><style>.a{opacity:1;}.b{fill:#616161;}</style></defs><g class="a" transform="translate(0.006)"><path class="b" d="M27.75,2.89,18.65,21.1,3.47,11.24,27.75,2.89M29.97,0a1.115,1.115,0,0,0-.31.05L.64,10.03a.955.955,0,0,0-.64.78.965.965,0,0,0,.43.92L18.21,23.29a1.34,1.34,0,0,0,.72.21,1.06,1.06,0,0,0,.35-.05,1.344,1.344,0,0,0,.84-.69L30.82,1.38A.943.943,0,0,0,30.68.33.938.938,0,0,0,29.97,0Z"/><path class="b" d="M12.31,18.66c-1.73-.85-1.11-1.79-1.11-1.79s7.11-6.14,9.54-8.44a.242.242,0,0,0,.03-.31.352.352,0,0,0-.38-.09L4.83,14V25.09a1.054,1.054,0,0,0,1.71.72l7.24-6.29A13.444,13.444,0,0,0,12.31,18.66Z"/></g></svg>
                                        </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>