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

我为您提供了一个示例，说明了如何使用Bootstrap中的 FLEX 和 SIZING 实用程序来解决此问题。首先，使用CSS代码，我将总视口高度在 card-header 和 card-body 之间进行划分（标题为15％，正文为85％）。其次，我使用 w-X 类代替 col-X 进行体宽划分，并在身体上应用了 d-flex 类。第三，为了使html标记简单，我从Javascript / JQuery填充了容器。希望对您有帮助。

$(document).ready(function()
{
    // Fill the message and friend columns container.

    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">
      <spam class="mx-auto">100% Height card</spam>
    </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>

具有独立可滚动列的Bootstrap 4全高卡

1 个答案: