Question

我正在制作一个消息传递系统，我正在使用bootstrap制作前端，但我遇到了一个小问题。我正在尝试制作一个固定高度的行。我知道我可以用像素做到这一点但是它不是（我不知道如何解释这个）修复。您可以在下面的图片中看到两行。它们以黑色边框突出显示。

正如您在图片中看到的那样，底行固定在底部，这是好的。但是顶行需要是剩余的高度并且是固定的。这样它连接到底部并且不能获得更多高度，所以理论上，如果内部的内容具有更高的高度然后行固定高度，则使滚动条激活。我尝试使用Height: -webkit-fill-available进行操作，但随后它会在整个卡中填充该行所在的位置。如何在不使用例如min-height: 600px;的情况下完成此操作

.z-depth-1 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}

.txt-bubble {
    background-color: lightgrey;
    padding: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    width: fit-content;
    margin-bottom: 5px;
}

.txt-bubble-response {
    background-color: #0069D9;
    color: white;
    padding: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    width: fit-content;
    float: right;
    margin-bottom: 5px;
}

#conversation {
    max-height: 553px;
    min-height: 553px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<div class="col-md-9">
  <div class="card z-depth-1" id="conversation">
      <div class="card-body">
          <div class="row conversationrow">

              <div class="col-md-1">
                  <img src="img/foto.jpg" alt="" class="rounded-circle" width="52">
              </div>
              <div class="col-md-11">
                  <p class="txt-bubble">Maar er zit een klein probleem aan dit systeem</p>
                  <small class="text-muted">2 Dagen geleden</small>
              </div>

              <div class="col-md-11">
                  <p class="txt-bubble-response">Ja klopt. Ik moet ervoor zorgen dat de kaart waar deze dingen in zitten, Scrolbaar wordt.</p>
              </div>
              <div class="col-md-11">
                  <p class="txt-bubble-response laatste">Zodat de gebruiker niet de hele pagina hoeft te scrollen.</p>
              </div>
              <div class="col-md-11">
                  <p class="txt-bubble-response laatste">Maar alleen de box waar de berichten in zitten.</p>
              </div>
              <div class="col-md-1">
                  <img src="img/foto.jpg" alt="" class="rounded-circle float-right" width="52" >
              </div>

              <div class="col-md-1">
                  <img src="img/foto.jpg" alt="" class="rounded-circle" width="52">
              </div>
              <div class="col-md-11">
                  <p class="txt-bubble">Hoe ga je dat doen dan? </p>
                  <small class="text-muted">2 Dagen geleden</small>
              </div>

              <div class="col-md-11">
                  <p class="txt-bubble-response laatste">Ik heb geen flauw idee, Ik heb het op StackOverflow gevraagt.</p>
              </div>
              <div class="col-md-1">
                  <img src="img/foto.jpg" alt="" class="rounded-circle float-right" width="52" >
              </div>

          </div>


          <div class="row" style="position: absolute; bottom: 0; width: 100%;">
              <div class="col-md-12">
                  <hr>
              </div>
              
              <div class="col-md-10">
                  <form action="">
                      <div class="form-group">
                          <input type="text" class="form-control" id="SearchInbox" aria-describedby="inboxHelp" placeholder="Stuur een bericht">

                      </div>
                  </form>
              </div>
              <div class="col-md-1">
                  <button type="button" class="btn btn-outline-primary float-right btn-send-msg">Versturen</button>
              </div>
          </div>

      </div>
  </div>
</div>

Answer 1

我冒昧地继续并重新编写你的前端代码。它可以在CodePen here

上看到

代码如下：

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
<div class="col-md-9">
    <div class="z-depth-1" id="conversation">
        <div class="card-body" id="scroll-body">

        <div class="col-md-12 chat-block-row">
            <div class="col-md-1">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsBpJyPNKUR0nW9IRoXLp3N7V0-eJJkx_dItFRIheHCYNxHYPi" alt="" class="rounded-circle" width="52">
            </div><!-- col-md-1 ends -->
            <div class="col-md-11">
                <p class="txt-bubble">Maar er zit een klein probleem aan dit systeem</p>
                <small class="text-muted">2 Dagen geleden</small>
            </div><!-- col-md-11 ends -->
        </div><!-- col-md-12 ends -->

        <div class="col-md-12 chat-block-row response">
            <div class="col-md-11">
                <p class="txt-bubble-response">Ja klopt. Ik moet ervoor zorgen dat de kaart waar deze dingen in zitten, Scrolbaar wordt.</p>
                <div class="clearfix"></div>
                <p class="txt-bubble-response laatste">Zodat de gebruiker niet de hele pagina hoeft te scrollen.</p>
                <div class="clearfix"></div>
                <p class="txt-bubble-response laatste">Maar alleen de box waar de berichten in zitten.</p>
                <div class="clearfix"></div>
                <small class="text-muted">2 Dagen geleden</small>
            </div><!-- col-md-11 ends -->
            <div class="col-md-1">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUESmCuDnAe26tFJDmg9A_b5O0NA1sjtL92t2Mz2IG5Co1XLiq" alt="" class="rounded-circle" width="52">
            </div><!-- col-md-1 ends -->
        </div><!-- col-md-12 ends -->

        <div class="col-md-12 chat-block-row">
            <div class="col-md-1">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsBpJyPNKUR0nW9IRoXLp3N7V0-eJJkx_dItFRIheHCYNxHYPi" alt="" class="rounded-circle" width="52">
            </div><!-- col-md-1 ends -->
            <div class="col-md-11">
                <p class="txt-bubble">Hoe ga je dat doen dan?</p>
                <small class="text-muted">2 Dagen geleden</small>
            </div><!-- col-md-11 ends -->
        </div><!-- col-md-12 ends -->

            <div class="col-md-12 chat-block-row response">
                <div class="col-md-11">
                    <p class="txt-bubble-response">Ik heb geen flauw idee, Ik heb het op StackOverflow gevraagt.</p>
                    <div class="clearfix"></div>
                    <small class="text-muted">2 Dagen geleden</small>
                </div><!-- col-md-11 ends -->
                <div class="col-md-1">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQUESmCuDnAe26tFJDmg9A_b5O0NA1sjtL92t2Mz2IG5Co1XLiq" alt="" class="rounded-circle" width="52">
                </div><!-- col-md-1 ends -->
            </div><!-- col-md-12 ends -->

        </div><!-- card-body ends -->

        <div class="col-md-12 form">
            <hr>
            <form action="">
                <input type="text" class="searchField col-md-10" id="SearchInbox" aria-describedby="inboxHelp" placeholder="Stuur een bericht">
                <button type="button" class="col-md-2 btn btn-outline-primary float-right btn-send-msg">Versturen</button>
            </form>
        </div><!-- col-md-12 & form ends -->


    </div><!-- z-depth-1 ends -->
</div><!-- col-md-9 ends -->

CSS

.z-depth-1 {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
    position:relative;
}

.card-body {
    /*display: flex;
    flex-direction: column;*/
    max-height: 300px;
    padding: 2% 0; /*This is added only to add space at top and bottom. Can be ignored. */
overflow-y: scroll;
}

.chat-block-row {
    padding: 1% 0; /*This is added only to add space at top and bottom. Can be ignored. */
}

.txt-bubble {
    background-color: lightgrey;
    padding: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    width: fit-content;
    margin-bottom: 5px;
}

.txt-bubble-response {
    background-color: #0069D9;
    color: white;
    padding: 2px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 5px;
    width: fit-content;
    float: right;
    margin-bottom: 5px;
}

.clearfix {
    clear:both;
}

#conversation {
    height: 400px;
}

.form {
    position: absolute !important;
    bottom: 2%; /* This value is set to 2% to have some space between the edge of the covering container and the form*/
    left:0;
}

.searchField  {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: .5% 0;
}

.response {
    text-align: right;
}

JS

var objDiv = document.getElementById("scroll-body");
objDiv.scrollTop = objDiv.scrollHeight;

希望这会有所帮助。：）

Answer 2

您可以从基础开始，并在顶部构建：

<强> HTML

<div class="card">
  <div class="card-body d-flex flex-column">

    <div class="chat-view col p-0">
      <!-- Chat Messages Here -->
    </div>

    <div class="chat-post">
      <!-- Chat Form Here -->
    </div>

  </div>
</div>

<强> CSS

.card {
  height: 553px;
}

.card-body {
  height: 100%;
}

.chat-view {
  overflow-x: hidden;
  overflow-y: auto;
}

这是一个JsFiddle的例子：
https://jsfiddle.net/xjx0bdvk/1/

Bootstrap 4使行固定高度并连接

2 个答案:

HTML

CSS

JS