主页 / 问题 / 1021204
Accepted
Родион Поляков
Asked:2020-09-07 19:57:31 +0000 UTC2020-09-07 19:57:31 +0000 UTC

如何调整块高度？

  • 772

我正在尝试从此聊天中复制对话框的布局。聊天本身有一个固定的高度。里面的聊天分为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;
    }
}
html

3 个回答

  1. Best Answer

    一切都非常简单。对于父块.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>

    • 1

  2. 我不知道这对你有多大帮助，但如果你给块

    overflow: auto;

    然后他会根据自己的需要伸展。

    • 0

  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>

    或者。在这个例子中，聊天的“body”将是屏幕高度的 30%，而整个聊天将是顶部和底部的 30% + 100px。

    .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>

    • 0

相关问题