html - Bootstrap 4 全高卡带独立滚动列

Question

我想制作一张卡片作为聊天正文，因此占据了屏幕的整个高度，因为除了聊天正文之外不会显示任何其他内容，我希望它占据屏幕上的所有空间。 在卡片中，我有两列都需要独立滚动。所以我不希望网站可以滚动，而是卡片内的两列。 第一列用于实际聊天，第二列用于聊天用户列表。

虽然我让它可以通过像素设置硬编码的最大高度值，但我似乎无法让它与自动全屏高度一起工作。

发生的事情是卡片被呈现为全高，但是尽管有 overflow-y: auto 内容还是溢出了卡片，当设置溢出滚动时，它基本上使滚动条准确内容的高度。

代码:

html, body
{
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container h-100">
  <div class="card h-100">
    <div class="card-header">
      100% Height card
    </div>
    <div class="card-body">
      <div class="row">
        <div class="col-10">
          <div style="overflow-y: scroll;" class="mh-100">
          	Independent scrollable column<br>
           	Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
          </div>
        </div>
        <div class="col-2">
          <div stlye="overflow-y: auto" class="mh-100">
            Independent scrollable column #2
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
            Text<br>
          </div>
        </div>
    </div>
  </div>
</div>

至于现在我开始计算 jQuery 中的最大高度，因为它相当简单并且允许我放置我想要的任何内容而不用担心改变高度百分比:

$(document).ready(function()
{
    calculateHeight();
    $(window).resize(function() { calculateHeight() });
});

function calculateHeight()
{
    let wnHeight = $(window).height();
    let boxHeight = $("#messagesBox").height();
    let cardHeight = $("#messagesCard").outerHeight();
    let cardPos = $("#messagesCard").offset();
    // calculate the offset to the bottom, this is how much we need to expand (or shrink)
    let offset = boxHeight + (wnHeight - (cardHeight + cardPos.top));
    if(offset < 480) // this just prevents the card from getting too small
        offset = 480;
    $("#messagesBox").css('max-height', `${offset}px`);
}

Answer 1

我已经举例说明了如何使用 FLEX 来解决这个问题和 SIZING来自 Bootstrap 4 的实用程序。首先，使用 CSS，我们将总的view-port height 分为card-header 和card-body (15% 到标题，85% 到正文)。其次，我们使用 w-* 类代替 col-* 进行体宽划分，将 d-flex 类应用于 body 。第三，为了保持 html 标记简单，我们从 JQuery 填充容器。希望对您有所帮助。

$(document).ready(function()
{
    // Fill the message and friend containers.

    for (var i = 0; i < 30; i++)
    {
        $("#msgWrap").append("<div class='text-primary'>Message " + i + "</div>");
        $("#friendWrap").append("<div class='text-danger'>Friend " + i + "</div>");
    }
});

html, body {
    height: 100vh;
}

.card-header {
    max-height: 15vh;
}

.card-body {
    max-height: 85vh;
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="card">

    <div class="card-header d-flex align-items-center text-white bg-dark">
      <span class="mx-auto">100% Height card</span>
    </div>

    <div class="card-body d-flex">
      <div id="msgCol" class="d-flex flex-column w-75">
         <div id="msgWrap" class="w-100" style="overflow-y:scroll"></div>
         <input class="w-100" type="text" placeholder="Write a new message"/>
      </div>

      <div id="friendCol" class="d-flex flex-column w-25">
        <div id="friendWrap" class="w-100" style="overflow-y:scroll"></div>
        <div class="w-100 border border-primary text-center text-bold">
          FOOTER
        </div>
      </div>
    </div>

  </div>
</div>