Как адаптировать блок по высоте?

267

12 июля 2021, 21:40

Пытаюсь скопировать вёрстку диалогового окна с вот этого чата. Сам чат имеет фиксированную высоту. Внутри чат разбит на 3 блока. 1 блок имеет фиксированную высоту и прижат к верху. 3 блок имеет фиксированную высоту и прижать к низу. 2 блок занимает всё оставшееся пространство с возможностью прокрутки контента внутри себя. Главная проблема в том, что я не понимаю как адаптировать блок чата по высоте. То есть, чтобы основной блок чата уменьшался вместе с окном браузера. Есть идеи?

html

<div class="cart">
    <div class="cart-header">
        <p>Прижать к верху.</p>
    </div>
    <div class="cart-body">
        <p>Занять все свободное место с возможностью прокрутки (overflow).</p>
    </div>
    <div class="cart-footer">
        <p>Прижать к низу.</p>
    </div>
</div>

css

.cart {
    position: fixed;
    right: 15px;
    bottom: 15px;
    // 576 px и больше.
    @include media-breakpoint-up(sm) {
        right: 30px;
        bottom: 30px;
    }
    &.show {
        width: 100%;
        height: 100%;
        // 576 px и больше.
        @include media-breakpoint-up(sm) {
            max-width: 380px;
            max-height: 600px;
        }
    }
}
.cart-body {
    display: none;
    .cart.show > & {
        display: block;
    }
}
.cart-footer {
    display: none;
    .cart.show > & {
        display: block;
    }
}

Answer 1

Всё очень просто. Для родительского блока .chat_contanier необходимо установить полную высоту окна браузера, т.е. 100%. Единица измерения vh. Точно также как и для его дочернего блока chat. Кроме этого, не забываем также установить и максимальную высоту для окна вашего чата max-height.

body { 
  background-color: #999; 
  margin: 0; 
  padding: 0; 
} 
 
.chat_contanier { 
  position: absolute; 
  bottom: 0; 
  right: 0; 
  height: 100vh; 
  max-height: 450px; 
} 
 
.chat { 
  position: relative; 
  overflow: hidden; 
  width: 250px; 
  background-color: #fff; 
  float: right; 
  border-radius: 5px; 
  height: 100vh; 
  max-height: 450px; 
} 
 
.chat_top { 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 40px; 
  line-height: 40px; 
  padding: 0 10px; 
  border-bottom: 2px solid red; 
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3); 
} 
 
.chat_bottom { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 60px; 
  line-height: 60px; 
  padding: 0 10px; 
  border-top: 2px solid red; 
  box-shadow: 2px 0 10px 0 rgba(0, 0, 0, 0.3); 
} 
 
.chat_center { 
  position: absolute; 
  top: 40px; 
  bottom: 60px; 
  left: 0; 
  right: 0; 
  padding: 10px; 
}

<div class="chat_contanier"> 
  <div class="chat"> 
    <div class="chat_top">Поддержка Чатры 
    </div> 
    <div class="chat_center">Диалог 
    </div> 
    <div class="chat_bottom">Сообщение... 
    </div> 
  </div> 
</div>

Answer 2

Не знаю насколько это может тебе помочь, но если блоку дать

overflow: auto;

То он тянется ровно настолько, сколько ему надо.

Answer 3

Идея использовать единицу измерения vh.

В этом примере всё окно чата будет в высоту 30% от высоты экрана

.cart { 
  position: fixed; 
  right: 25px; 
  bottom: 15px; 
  height: 30vh; 
  min-height: 150px; 
  display: -webkit-flex; 
  display: -moz-flex; 
  display: -ms-flex; 
  display: -o-flex; 
  display: flex; 
  -webkit-flex-direction: column; 
  -moz-flex-direction: column; 
  -ms-flex-direction: column; 
  -o-flex-direction: column; 
  flex-direction: column; 
} 
 
.cart-header { 
  height: 50px; 
} 
 
.cart-body { 
  flex: 1; 
  background-color: #f0f0f0; 
} 
 
.cart-footer { 
  height: 50px; 
}

<div class="cart"> 
  <div class="cart-header"> 
    <p>Прижать к верху.</p> 
  </div> 
  <div class="cart-body"> 
    <p>Занять все свободное место с возможностью прокрутки (overflow).</p> 
  </div> 
  <div class="cart-footer"> 
    <p>Прижать к низу.</p> 
  </div> 
</div>

Или. В этом примере "тело" чата будет в высоту 30% от высоты экрана, а весь чат будет 30% + 100рх верхней и нижней части.

.cart { 
  position: fixed; 
  right: 25px; 
  bottom: 15px; 
} 
 
.cart-header { 
  height: 50px; 
} 
 
.cart-body { 
  flex: 1; 
  background-color: #f0f0f0; 
  height: 30vh; 
} 
 
.cart-footer { 
  height: 50px; 
}

<div class="cart"> 
  <div class="cart-header"> 
    <p>Прижать к верху.</p> 
  </div> 
  <div class="cart-body"> 
    <p>Занять все свободное место с возможностью прокрутки (overflow).</p> 
  </div> 
  <div class="cart-footer"> 
    <p>Прижать к низу.</p> 
  </div> 
</div>