Question

在另一个卡中使用嵌套的Bootstrap卡。我想让最里面的卡滚动较长的内容，而两张卡都保持全高。奇怪的是，这在IE11中可以按预期工作，但在Chrome和Edge中却失败。我尝试了h-100和flex-grow的所有变体，但均未成功。当内部卡体为空时，一切看起来都很不错，但是一旦我添加的内容超出屏幕显示的容量，就会失败。此外，滚动条仅在Chrome和IE中显示，而在Edge中不显示。

这是密码笔：https://codepen.io/anon/pen/JZqqeV

html,
body {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: grey;
}

.overflowAuto {
  overflow-x: hidden;
  overflow-y: auto;
}

<div class="card h-100">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" id="patchGroups-tab" data-toggle="tab" href="#patchGroups_tab" role="tab" aria-controls="patchGroups_tab" aria-selected="true">Targets</a>
      </li>
    </ul>
  </div>
  <div class="card-body h-100">
    <div class="row h-100">
      <div class="col-md-2 pl-2">
        <div class="card h-100">
          <div class="card-header bg-secondary text-white">Ungrouped</div>
          <div class="card-body overflowAuto h-100">
            <ul class="list-unstyled">
              <li>10.0.10.99</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.99</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-10">more stuff here</div>
    </div>
  </div>
</div>

Answer 1

我想这就是你要做什么？我删除了所有.h-100类，并根据其他高度的总和将.overflowAuto类更改为计算出的高度。

new codepen

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" id="patchGroups-tab" data-toggle="tab" href="#patchGroups_tab" role="tab" aria-controls="patchGroups_tab" aria-selected="true">Targets</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="row">
      <div class="col-md-2 pl-2">
        <div class="card">
          <div class="card-header bg-secondary text-white">Ungrouped</div>
          <div class="card-body overflowAuto">
            <ul class="list-unstyled">
              <li>10.0.10.99</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.1</li>
              <li>10.0.10.2</li>
              <li>10.0.10.99</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="col-md-10">more stuff here</div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  overflow: hidden;
  padding: 10px;
  background-color: grey;
}
.overflowAuto {
  overflow-x: hidden;
  overflow-y: auto;
  // height: calc(100vh - 163px);
}

JS

var overflowAuto = document.getElementsByClassName('overflowAuto')[0];

//Get the distance from the top and add 20px for the padding
var maxHeight = overflowAuto.getBoundingClientRect().top + 20;

overflowAuto.style.height = "calc(100vh - " + maxHeight + "px)";

卡体内容溢出包含卡

1 个答案: